/* Flikkin
   Two-tone: --brand coral (logo, New, unread counts, date badges) and --accent teal (everything you press).
   Coral stands apart from the gold-on-black look of IMDb/JustWatch/Plex and the purple/blue/green of
   Trakt, TV Time and Letterboxd; teal is its complement and reads as calm "go", not warning.
   Gold survives only for the marquee bulbs and countdowns. Dark = charcoal; light = warm cream.
   Type: Fraunces (logo, page and section titles) + Instrument Sans (everything else). */

:root {
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif; /* logo + big titles only; optical sizing keeps it sturdy small */
  --header-h: 60px;
  --nav-h: 64px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #16181c;
  --surface: #1f2228;
  --surface-2: #2a2e36;
  --line: #3a3f4a;
  --ink: #eceef2;
  --muted: #a0a7b3;
  --brand: #ff6b57;      /* coral: logo, New labels, unread counts, date badges */
  --brand-ink: #2b0f0a;  /* 6.6:1 on coral */
  --accent: #4fd1c5;     /* teal: buttons, selected tabs/chips, focus (anything you press) */
  --accent-ink: #062b28; /* ~10:1 on teal */
  --bulb: #e6b94f;       /* gold marquee bulbs */
  --countdown: #e6b94f;
  --type-movie: #f2c46b; /* movie tag moved to gold so it doesn't compete with coral */
  --type-tv: #8fb6ff;
  --like: #ff7a9c;
  --teal: #7fd0c1;
  --type-doc: #8ee09c;
  --danger: #ff8fb1;      /* rose, distinct from coral */
  --danger-fill: #a3203a; /* crimson, distinct from coral buttons */
  --note-bg: var(--surface-2);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a7b3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #fbf6f2;        /* warm cream */
  --surface: #ffffff;
  --surface-2: #f4ebe5;
  --line: #e6d8cf;
  --ink: #1e1a18;
  --muted: #6a5d57;     /* 5.9:1 on the cream background */
  --brand: #c8412c;     /* deep coral: 4.9:1 with white text */
  --brand-ink: #ffffff;
  --accent: #0f766e;    /* deep teal: 5.5:1 with white text */
  --accent-ink: #ffffff;
  --bulb: #b07d0e;
  --countdown: #7a5000; /* ~6:1 on white */
  --type-movie: #8a5a00;
  --type-tv: #1d54b0;
  --like: #c0225a;
  --teal: #0f6b5e;
  --type-doc: #2f7a3f;
  --danger: #a3203a;
  --danger-fill: #a3203a;
  --note-bg: #fdf8f4;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a5d57' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; line-height: 1.15; letter-spacing: -0.01em; font-optical-sizing: auto; }
/* Card and small titles stay in the sans: Bodoni's hairlines get hard to read at small sizes. */
h3 { font-family: var(--body); font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); }
h3 { font-size: 1.3rem; }
a { color: inherit; }
p { margin: 0; }
img { max-width: 100%; display: block; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.fill { fill: currentColor; stroke: none; }

/* ---------- header + nav ---------- */

.top {
  position: sticky; top: 0; z-index: 10;
  height: var(--header-h);
  display: flex; align-items: center; gap: 24px;
  padding: 0 max(16px, env(safe-area-inset-left));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
/* Logo badge: same fill as .btn.primary, tighter corners for a small wordmark. */
.brand {
  display: inline-flex; align-items: center; flex: none;
  padding: 0.22rem 0.5rem; border-radius: 5px;
  background: var(--brand); color: var(--brand-ink);
  font: 800 1.1rem/1 var(--display); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
}
.brand:hover { filter: brightness(1.06); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

nav.main { display: flex; gap: 4px; }
nav.main a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  text-decoration: none; color: var(--muted); font-weight: 500;
}
nav.main a:hover { color: var(--ink); }
nav.main a.on { color: var(--ink); background: var(--surface-2); }
nav.main a .ic { display: none; }

@media (max-width: 719px) {
  :root { --header-h: 56px; }
  .brand { font-size: 1rem; }
  nav.main {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    height: calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding: 0 0 env(safe-area-inset-bottom);
    gap: 0;
    background: var(--surface);
    border-top: 1px solid var(--line);
  }
  nav.main a {
    flex: 1; flex-direction: column; justify-content: center; gap: 2px;
    border-radius: 0; padding: 6px 2px; font-size: 0.72rem; background: none;
  }
  nav.main a.on { background: none; color: var(--accent); }
  nav.main a .ic { display: block; }
}

/* One wide page width for every view, so all screens share the grid view's left edge. */
#view {
  max-width: 1280px; margin: 0 auto;
  padding: 28px 16px 48px;
}
@media (max-width: 719px) {
  #view { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 32px); }
}

.foot {
  max-width: 1280px; margin: 0 auto; padding: 0 16px 32px;
  font-size: 0.78rem; color: var(--muted);
}
@media (max-width: 719px) { .foot { padding-bottom: calc(var(--nav-h) + 24px); } }

/* ---------- controls ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 0.95rem var(--body);
  padding: 0.6rem 1.15rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 0.4rem 0.85rem; font-size: 0.85rem; }
.btn.danger { color: var(--danger); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid transparent; background: none; color: var(--ink); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); }
a.icon-btn { text-decoration: none; }
.icon-btn.on { background: var(--surface-2); color: var(--accent); }
.settings-section { margin: 28px 0 12px; font-size: 1.1rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
[data-theme="dark"] .i-moon, [data-theme="light"] .i-sun { display: none; }

.link { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer; }

input, select, textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.6rem 0.75rem;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
/* Custom dropdowns: drop the native chrome, draw our own chevron, theme the option list. */
select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 2.2rem;
  background-image: var(--chev); background-repeat: no-repeat;
  background-position: right 0.75rem center; background-size: 14px;
}
select:hover { border-color: var(--muted); }
select option { background: var(--surface); color: var(--ink); }
label { display: grid; gap: 6px; font-weight: 500; font-size: 0.92rem; }
label .hint { font-weight: 400; color: var(--muted); }
form.stack { display: grid; gap: 14px; }
.row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 519px) { .row { grid-template-columns: 1fr; } }
.form-error { color: var(--danger); min-height: 1.2em; font-size: 0.9rem; }

.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.seg button {
  font: 600 0.88rem var(--body); padding: 0.4rem 0.9rem; border-radius: 999px; border: 0;
  background: none; color: var(--muted); cursor: pointer;
}
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.head-actions { display: flex; align-items: center; gap: 10px; }
.icon-seg button { display: grid; place-items: center; padding: 0.4rem 0.65rem; }
.icon-seg .ic { width: 18px; height: 18px; }
.seg[hidden] { display: none; }
.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
/* Family row: large avatars, the feed's main filter. */
.family-row {
  display: flex; gap: 14px; overflow-x: auto; scrollbar-width: thin;
  margin: 0 -16px 16px; padding: 6px 16px 10px; scroll-snap-type: x proximity;
}
.fam {
  flex: none; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; scroll-snap-align: start;
  font: 600 0.85rem var(--body);
}
.fam .avatar { transition: box-shadow 0.15s; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--line); }
.fam:hover .avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--muted); }
.fam[aria-pressed="true"] { color: var(--ink); }
.fam[aria-pressed="true"] .avatar { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent); }
.fam-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam .fam-all { --s: 64px; background: var(--surface-2); color: var(--ink); }
.fam .fam-all .ic { width: 28px; height: 28px; }
@media (max-width: 519px) { .fam { width: 72px; } .fam .avatar { width: 56px; height: 56px; font-size: 25px; } }

.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: var(--s, 28px); height: var(--s, 28px); border-radius: 50%;
  background: var(--c, #8c1d4a); color: #fff;
  font: 700 calc(var(--s, 28px) * 0.45) var(--body);
}
.avatar.photo { overflow: hidden; background: var(--surface-2); }
.avatar.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.photo-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 200px; }
.photo-actions .status { flex-basis: 100%; }

.empty { padding: 48px 8px; color: var(--muted); }
.empty h2 { color: var(--ink); margin-bottom: 8px; }
.empty .btn { margin-top: 16px; }

/* ---------- timeline ---------- */

.month { margin-bottom: 24px; }
.month > h2 {
  position: sticky; top: var(--header-h); z-index: 2;
  margin: 0 0 12px 64px; padding: 10px 0 6px;
  background: var(--bg);
}
.entries { position: relative; }
.entries::before {
  content: ""; position: absolute; left: 23px; top: 0; bottom: 0; width: 2px; background: var(--line);
}
.entry { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }

.stub { position: relative; z-index: 1; align-self: start; background: var(--bg); padding: 14px 0 8px; text-align: center; }
.stub::before {
  content: ""; display: block; width: 10px; height: 10px; margin: 0 auto 8px; border-radius: 50%;
  background: var(--bulb);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bulb) 25%, transparent);
}
.stub .day { display: block; font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.stub .day.tba { font-size: 1rem; color: var(--muted); }
.stub .dow { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 2px; }

.card {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px;
}
@media (max-width: 519px) { .card { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 12px; } }

.poster {
  position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; padding: 0;
  border: 0; border-radius: 8px; overflow: hidden; background: var(--surface-2); color: inherit;
}
.poster img { width: 100%; height: 100%; object-fit: cover; }
.poster .ph { display: grid; place-items: center; height: 100%; font-family: var(--display); font-weight: 700; font-size: 2.5rem; color: var(--muted); }

.body { min-width: 0; display: grid; gap: 8px; align-content: start; }
.head { display: grid; gap: 8px; align-content: start; }
/* Phones: poster sits beside the title and date only; the note and everything below use the full card width. */
@media (max-width: 519px) {
  .card { row-gap: 10px; }
  .card > .body { display: contents; }
  .card > .body > :not(.head) { grid-column: 1 / -1; min-width: 0; }
}
.title-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tag { font-size: 0.78rem; font-weight: 600; padding: 2px 9px; border-radius: 6px; background: var(--surface-2); color: var(--muted); }
.when { display: flex; flex-wrap: wrap; gap: 4px 14px; font-weight: 500; }
.when .rel, .agenda-day .rel { color: var(--countdown); font-weight: 600; }
.when .muted { font-weight: 400; }
.overview { color: var(--muted); font-size: 0.93rem; max-width: 62ch; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 0.78rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.added { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 0.9rem; }
.added a { font-weight: 600; }
/* The family member's note is the focal point of a card. */
.note {
  margin: 4px 0 2px; padding: 12px 14px 12px 16px;
  background: var(--note-bg); border-left: 3px solid var(--bulb); border-radius: 4px 10px 10px 4px;
  display: grid; gap: 10px;
}
.note blockquote {
  margin: 0; font-family: var(--body); font-weight: 500; font-size: 1.15rem; line-height: 1.45; /* notes stay sans for readability */
  overflow-wrap: anywhere; white-space: pre-line;
}
.note blockquote::before { content: "\201C"; color: var(--bulb); margin-right: 2px; }
.note blockquote::after { content: "\201D"; color: var(--bulb); margin-left: 1px; }
@media (max-width: 519px) { .note blockquote { font-size: 1.08rem; } }
.added .link { margin-left: auto; font-size: 0.85rem; }
.note-edit { gap: 8px; }
.note-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }

.actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.act {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: none; color: var(--ink);
  font: 500 0.88rem var(--body); cursor: pointer; text-decoration: none;
}
.act:hover { background: var(--surface-2); }
.act .ic { width: 17px; height: 17px; }
.act.in[aria-pressed="true"], .act[data-act="watched"][aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.act.icon-only { padding: 6px 9px; }
.act.sm { padding: 3px 10px; font-size: 1rem; }
.act[aria-pressed="true"].sm { background: var(--surface-2); border-color: var(--accent); }

/* Faces: who is in / who watched, as overlapping avatars. */
.faces { display: inline-flex; align-items: center; padding-left: 6px; }
.face { position: relative; margin-left: -6px; }
.face .avatar { box-shadow: 0 0 0 2px var(--surface); }
.face-mark { position: absolute; right: -5px; bottom: -5px; font-size: 0.7rem; line-height: 1; }
.face-more { margin-left: 4px; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.watched-line { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.verdict { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; }

/* Pills on the title row and comment button. */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font: 700 0.72rem var(--body); letter-spacing: 0.02em; }
.pill.new { background: var(--brand); color: var(--brand-ink); }
.pill.fav { border: 1px solid var(--bulb); color: var(--countdown); }
.pill.fav .ic { width: 12px; height: 12px; }
.act .pill { margin-left: 2px; }
.entry.is-new .card { border-color: var(--brand); }

/* Latest comment preview, so active conversations are visible without opening them. */
.latest {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; text-align: left;
  border: 0; border-radius: 10px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 0.9rem; cursor: pointer;
}
.latest-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.latest-all { flex: none; color: var(--muted); font-size: 0.82rem; }
.latest:hover .latest-all { color: var(--ink); }

.desc { display: grid; gap: 6px; }
.desc-link { justify-self: start; font-size: 0.88rem; padding: 2px 0; }

/* More-options menu for owner tools (edit note, remove). */
details.menu { position: relative; margin-left: auto; }
details.menu summary { list-style: none; }
details.menu summary::-webkit-details-marker { display: none; }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 180px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: grid;
}
.menu-pop button {
  text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink);
  font: 500 0.92rem var(--body); cursor: pointer; min-height: 40px;
}
.menu-pop button:hover { background: var(--surface-2); }
.menu-pop button.danger { color: var(--danger); }

.comments { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.comments[hidden] { display: none; }
.comment { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: start; font-size: 0.92rem; }
.comment .who { font-weight: 600; margin-right: 8px; }
.comment .when-c { color: var(--muted); font-size: 0.8rem; }
.comment p { overflow-wrap: anywhere; }
.comment .x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; }
.comment .x:hover { color: var(--danger); }
.comment-form { display: flex; gap: 8px; }
.comment-form input { flex: 1; }

/* ---------- people, playlists, admin ---------- */

.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.person-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.person-card:has(.person:hover) { border-color: var(--muted); }
.person { display: flex; align-items: center; gap: 14px; padding: 16px; text-decoration: none; color: inherit; }
.person-stats { display: grid; gap: 3px; margin-top: 4px; color: var(--muted); font-size: 0.88rem; }
.person-stats > span { display: flex; align-items: center; gap: 7px; }
.person-stats .ic { width: 15px; height: 15px; flex: none; }
.person-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; margin-top: auto; }
.person strong { display: block; font-size: 1.05rem; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-bottom: 18px; }
.panel > h2 { margin-bottom: 12px; font-size: 1.3rem; }
.panel > h3 { margin-bottom: 10px; }

.playlist { margin-bottom: 18px; }
.playlist header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.items { list-style: none; margin: 14px 0 0; padding: 0; display: grid; }
.pl-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pl-new { display: grid; gap: 14px; grid-template-columns: 150px 1fr 1fr; align-items: end; }
.add-item .row { align-items: end; }
@media (max-width: 619px) { .pl-new { grid-template-columns: 1fr; } }
.items li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.items a { font-weight: 600; overflow-wrap: anywhere; }
.items .x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; }
.items .x:hover { color: var(--danger); }
.add-item { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); }
.pl-results .results { max-height: 320px; overflow-y: auto; }

.list { list-style: none; margin: 0; padding: 0; display: grid; }
.list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.list li:first-child { border-top: 0; }
.list .grow { flex: 1; min-width: 180px; }
.status { font-size: 0.82rem; color: var(--muted); }

/* ---------- auth ---------- */

.auth { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
/* Sign-in screens: a blurred, dimmed photo behind the card (video-store shelves, Sean Benesh on
   Unsplash, Unsplash License; self-hosted so visitors aren't reported to Unsplash). Mood only. */
/* contain: paint clips the oversized blur layer to this box. Without it, iPhone Safari counted the
   layer's extra 40px as page width and opened the sign-in page slightly zoomed in. */
.auth { position: relative; isolation: isolate; contain: paint; }
.auth::before, .auth::after { content: ""; position: fixed; z-index: -1; pointer-events: none; }
.auth::before { inset: -40px; background: url("login-bg.jpg") center / cover no-repeat; filter: blur(6px); }
.auth::after { inset: 0; background: color-mix(in srgb, var(--bg) 55%, transparent); }
[data-theme="light"] .auth::after { background: color-mix(in srgb, var(--bg) 70%, transparent); }
.auth-card { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }
.auth-card { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: grid; gap: 18px; }
.auth-card h1 { font-size: 2rem; }
.auth-theme { position: fixed; top: 12px; right: 12px; }

/* ---------- dialogs + toast ---------- */

dialog {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  padding: 20px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); color: var(--ink);
}
dialog::backdrop { background: rgba(8, 9, 12, 0.72); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.results { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.result {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 8px; border-radius: 10px; border: 1px solid var(--line); background: none; color: var(--ink); font: inherit; cursor: pointer;
}
.result:hover { background: var(--surface-2); }
.result.dup { border-style: dashed; }
.dup-note { display: block; margin-top: 2px; font-size: 0.82rem; font-weight: 600; color: var(--countdown); }
.when-stack { flex-direction: column; gap: 2px; }
.result img, .result .thumb { width: 40px; height: 60px; border-radius: 4px; object-fit: cover; background: var(--surface-2); flex: none; }
.result .meta { display: flex; gap: 10px; color: var(--muted); font-size: 0.85rem; }
.preview { display: grid; grid-template-columns: 96px 1fr; gap: 14px; margin: 14px 0; }
.preview .poster { width: 96px; }
.when .link { font-size: 0.85rem; font-weight: 400; }

.toast {
  position: fixed; inset: auto; margin: 0; border: 0; overflow: visible; /* reset popover UA styles */
  left: 50%; bottom: calc(var(--nav-h) + 20px + env(safe-area-inset-bottom)); z-index: 50;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 500; font-size: 0.92rem;
  transition: opacity 0.15s, transform 0.15s; max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--danger); color: #fff; }
@media (min-width: 720px) { .toast { bottom: 24px; } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- calendar view ---------- */

.cal-head { display: flex; align-items: center; gap: 6px; margin: 10px 0 12px; }
.cal-head h2 { flex: 1; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { font-size: 0.75rem; font-weight: 600; color: var(--muted); text-align: center; padding-bottom: 2px; }
.cal-day {
  min-width: 0; min-height: 118px; padding: 6px; display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.cal-day.blank { background: transparent; border-color: transparent; }
.cal-day.today { border-color: var(--brand); }
.cal-num { font-size: 0.8rem; font-weight: 600; color: var(--muted); line-height: 1; }
.cal-day.has .cal-num { color: var(--ink); }
.cal-day.today .cal-num { color: var(--brand); }
.cal-thumb { display: block; flex: none; width: 26px; aspect-ratio: 2 / 3; border-radius: 3px; overflow: hidden; background: var(--surface-2); color: var(--muted); }
.cal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cal-thumb .ph { display: grid; place-items: center; height: 100%; font-weight: 700; font-size: 0.75rem; }
.cal-item {
  display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; padding: 3px; text-align: left;
  border: 0; border-radius: 6px; background: var(--surface-2); color: var(--ink); cursor: pointer; font: inherit;
}
.cal-item:hover { outline: 2px solid var(--accent); }
.cal-text { min-width: 0; display: grid; }
.cal-title { font-size: 0.74rem; font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cal-kind { font-size: 0.66rem; color: var(--muted); }
.cal-more {
  align-self: flex-start; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line);
  background: none; color: var(--ink); font: 600 0.72rem var(--body); cursor: pointer;
}
.cal-more:hover { background: var(--surface-2); }
.cal-none { margin-top: 14px; }
.cal-tba { margin-top: 22px; }
.cal-tba h3 { margin-bottom: 10px; font-size: 1.05rem; }
.cal-tba-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.cal-tba-list .cal-thumb { width: 32px; }
.cal-tba-list .cal-title { font-size: 0.85rem; }

/* Phones: agenda list instead of a cramped grid. */
.agenda { display: grid; gap: 14px; }
.agenda-day h3 { font-size: 0.95rem; margin-bottom: 6px; color: var(--muted); }
.agenda-day.today h3 { color: var(--ink); }
.agenda-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; margin-bottom: 6px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font: inherit; cursor: pointer;
}
.agenda-row .cal-thumb { width: 40px; }
.agenda-text { flex: 1; min-width: 0; display: grid; }
.agenda-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-text .muted { font-size: 0.85rem; }

/* Card dialog: the same entry card as the list, without the timeline date stub. */
#dlg-title { width: min(680px, calc(100vw - 24px)); }
#dlg-title .stub { display: none; }
#dlg-title .entry { grid-template-columns: minmax(0, 1fr); margin-bottom: 12px; }
#dlg-title .entry:last-child { margin-bottom: 0; }

/* ---------- feed controls ---------- */

/* Filter chips: each shows its current value; a native <select> sits invisibly on top so the whole
   chip opens the phone's own picker. Teal outline + tint when changed from the default. */
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 18px; }
.fsel {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: 600 0.88rem var(--body); cursor: pointer; white-space: nowrap;
}
.fsel:hover { border-color: var(--muted); }
.fsel-label { color: var(--muted); font-weight: 500; }
.fsel-caret { width: 16px; height: 16px; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 2; }
.fsel select {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
  appearance: none; border: 0; padding: 0; margin: 0; font-size: 16px; /* 16px stops iOS zooming in */
}
.fsel:has(select:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.fsel.changed { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.fsel.changed .fsel-label, .fsel.changed .fsel-caret { color: var(--accent); }
.fsel-reset { margin-left: 4px; font-weight: 600; }

.fam-face { position: relative; display: inline-block; }
.fam-badge {
  position: absolute; top: -2px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font: 700 0.75rem var(--body);
  box-shadow: 0 0 0 3px var(--bg);
}

@media (max-width: 719px) {
  /* Comfortable tap targets for the remaining text links. */
  .desc-link, .card .link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- profiles ---------- */

.back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px; color: var(--muted); text-decoration: none; font-weight: 600; }
.back .ic { width: 18px; height: 18px; }
.profile-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.profile-head p { margin: 4px 0 10px; }
.count-inline { font-size: 0.95rem; font-weight: 600; }
.mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mini {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px; text-align: left;
  border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; cursor: pointer;
}
.mini:hover { background: var(--surface-2); }
.mini .cal-thumb { width: 36px; }
.mini-text { flex: 1; min-width: 0; display: grid; }
.mini-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-text .muted { font-size: 0.85rem; }
.mini-verdict { font-size: 1.1rem; }

/* Invite type toggle (radio inputs styled as a segmented control). */
.invite-form { gap: 10px; }
.seg-radio { position: relative; display: block; font-weight: 600; }
.seg-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-radio span { display: block; padding: 0.4rem 0.9rem; border-radius: 999px; font: 600 0.88rem var(--body); color: var(--muted); cursor: pointer; }
.seg-radio input:checked + span { background: var(--accent); color: var(--accent-ink); }
.seg-radio input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.invite-hint { display: none; }
.invite-form:has(input[value="single"]:checked) .invite-hint[data-for="single"],
.invite-form:has(input[value="shared"]:checked) .invite-hint[data-for="shared"] { display: block; }
.invite-form .seg { justify-self: start; }

/* Header settings button: gear plus label. */
.settings-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 0.42rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 600 0.88rem var(--body);
}
.settings-link .ic { width: 18px; height: 18px; }
.settings-link:hover { background: var(--surface-2); }
.settings-link.on { background: var(--surface-2); color: var(--accent); border-color: transparent; }

/* Type tag with icon. */
.type-tag { display: inline-flex; align-items: center; gap: 4px; }
.type-tag .ic { width: 13px; height: 13px; }

/* Date badge on the poster: only used on narrow screens, where the timeline column is dropped. */
.poster-date { display: none; }

@media (max-width: 599px) {
  /* Give the card the full width: no date column or rail; the date moves onto the poster. */
  .entries::before { display: none; }
  .entry { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .entry .stub { display: none; }
  .month > h2 { margin-left: 0; }
  .poster-date {
    position: absolute; left: 6px; top: 6px; display: grid; justify-items: center; min-width: 34px; padding: 3px 5px 4px;
    border-radius: 6px; background: var(--brand); color: var(--brand-ink); line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  .pd-day { font: 800 1rem/1 var(--body); }
  .pd-mon { font: 700 0.6rem/1 var(--body); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
  /* Header actions get their own row; Add keeps its label. */
  .page-head .head-actions { width: 100%; }
  .page-head .head-add { margin-left: auto; }
}

/* Documentary tag stands out from fiction so nothing is misread as one or the other. */
/* Each type gets its own colour: movie orange, TV blue, documentary teal. */
.type-tag { --tc: var(--muted); color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); }
.type-tag.movie { --tc: var(--type-movie); }
.type-tag.tv { --tc: var(--type-tv); }
.type-tag.doc { --tc: var(--type-doc); } /* green, so teal only means 'pressable' */
label.check { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
label.check input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }

/* ---------- undo, confirm, recently deleted ---------- */

.toast { display: flex; align-items: center; gap: 12px; }
.toast.has-act { pointer-events: auto; padding-right: 8px; }
.toast-act {
  border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font: 700 0.88rem var(--body);
}
.toast.bad .toast-act { background: #fff; color: var(--danger); }

#dlg-confirm { width: min(440px, calc(100vw - 24px)); }
.confirm-form { gap: 12px; }
.confirm-form h2 { font-size: 1.3rem; }
#confirm-body { display: grid; gap: 8px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.btn.danger-fill { background: var(--danger-fill); color: #fff; border-color: transparent; }
.btn.danger-fill:hover { filter: brightness(1.06); }

.trash-row .cal-thumb { width: 32px; }
.trash-quote { font-style: italic; overflow-wrap: anywhere; }
#confirm-type[hidden] { display: none; }

/* ---------- comment reactions ---------- */

.rx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.rx {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: none; color: var(--ink); font: 600 0.8rem var(--body); cursor: pointer; line-height: 1.6;
}
.rx.static { cursor: default; }
.rx:hover:not(.static) { background: var(--surface-2); }
.rx[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.rx-pick { position: relative; }
.rx-pick summary {
  list-style: none; display: grid; place-items: center; width: 28px; height: 24px; border-radius: 999px;
  border: 1px dashed var(--line); color: var(--muted); cursor: pointer;
}
.rx-pick summary::-webkit-details-marker { display: none; }
.rx-pick summary .ic { width: 15px; height: 15px; }
.rx-pick summary:hover, .rx-pick[open] summary { color: var(--ink); border-style: solid; }
.rx-pop {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 6; display: flex; gap: 2px; padding: 5px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.rx-pop button {
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; font-size: 1.25rem; cursor: pointer;
  transition: transform 0.1s;
}
.rx-pop button:hover { transform: scale(1.18); background: var(--surface-2); }
.rx-pop button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.latest-rx { flex: none; font-size: 0.8rem; color: var(--muted); }

/* Trailer lives under the poster as a highlighted button. */
.poster-col { display: grid; gap: 8px; align-content: start; min-width: 0; }
.trailer-btn {
  display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 8px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); border: 1px solid transparent;
  font: 700 0.82rem var(--body); text-decoration: none; white-space: nowrap;
}
.trailer-btn .ic { width: 14px; height: 14px; }
.trailer-btn:hover { filter: brightness(1.08); }
.trailer-btn.find { background: none; color: var(--countdown); border-color: var(--accent); } /* no trailer yet: lighter weight */
@media (max-width: 519px) {
  .trailer-btn { padding: 6px 4px; font-size: 0.78rem; }
  .trailer-btn.find .ic { display: none; } /* "Find trailer" fits the narrow poster column */
}

/* ---------- grid view (poster wall) ---------- */

.grid-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px 12px; }
.tile {
  display: grid; gap: 4px; align-content: start; min-width: 0; padding: 0; text-align: left;
  border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer;
}
.tile-poster {
  position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); transition: transform 0.12s, border-color 0.12s;
}
.tile-poster img { width: 100%; height: 100%; object-fit: cover; }
.tile-poster .ph { display: grid; place-items: center; height: 100%; font-weight: 700; font-size: 2rem; }
.tile:hover .tile-poster, .tile:focus-visible .tile-poster { transform: translateY(-2px); border-color: var(--accent); }
.tile:focus-visible { outline: none; }
.tile-date {
  position: absolute; left: 6px; top: 6px; display: grid; justify-items: center; min-width: 32px; padding: 3px 5px 4px;
  border-radius: 6px; background: var(--brand); color: var(--brand-ink); line-height: 1;
}
.tile-date b { font: 800 0.95rem/1 var(--body); }
.tile-date i { font: 700 0.58rem/1 var(--body); font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.tile-count {
  position: absolute; right: 6px; top: 6px; padding: 2px 7px; border-radius: 999px;
  background: rgba(10, 12, 16, 0.72); color: #f2cf73; font: 700 0.7rem var(--body);
}
.tile-count.out { color: #fff; }
.tile-faces { position: absolute; left: 8px; bottom: 6px; display: flex; }
.tile-faces .avatar { margin-left: -6px; box-shadow: 0 0 0 2px rgba(10, 12, 16, 0.8); }
.tile-faces .avatar:first-child, .tile-adder .avatar { margin-left: 0; }
.tile-faces > .avatar:first-of-type { margin-left: -6px; }
.tile-adder { display: inline-flex; margin-right: 2px; }
.tile-adder .avatar { box-shadow: 0 0 0 2px #fff; }
.tile-new { position: absolute; right: 6px; bottom: 6px; }
.tile-fav {
  position: absolute; right: 6px; top: 30px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(10, 12, 16, 0.72); color: #f2cf73;
}
.tile-fav .ic { width: 12px; height: 12px; }
.tile-title { font-size: 0.86rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-sub { font-size: 0.76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 519px) { .grid-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; } }
/* Keep long text readable on wide screens; Settings stays a single column on the same left edge. */
.note blockquote { max-width: 75ch; }
.latest { max-width: 900px; }
.page-settings > * { max-width: 860px; }
.head-add { white-space: nowrap; }
.month.grid-month > h2 { margin-left: 0; }
/* Comment count on the poster, bottom right (New moves under the date badge). */
.tile-comments {
  position: absolute; right: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px;
  border-radius: 999px; background: rgba(10, 12, 16, 0.72); color: #fff; font: 700 0.7rem var(--body);
}
.tile-comments .ic { width: 12px; height: 12px; }
.tile-comments.fresh { background: var(--brand); color: var(--brand-ink); } /* new since your last visit */
.tile-new { right: auto; bottom: auto; left: 6px; top: 44px; }

/* ---------- public share page ---------- */
.pub-head { margin-top: 4px; }
.pub-detail { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; }
.pub-detail .body { display: grid; gap: 10px; align-content: start; }
@media (max-width: 519px) { .pub-detail { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; } }
/* Small caption above the family row, styled like the filter panel's group labels. */
.row-label { margin: 0 0 4px; font-size: 0.78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- recommendations ("For you") ---------- */

.nav-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 999px;
  background: var(--brand); color: var(--brand-ink); font: 700 0.7rem var(--body);
}
.nav-badge[hidden] { display: none; }
@media (max-width: 719px) { nav.main a { position: relative; } .nav-badge { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; } }

.rec-tabs { margin-bottom: 18px; flex-wrap: wrap; }
.rec-tabs .count { display: inline-grid; place-items: center; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--accent-ink); color: var(--accent); font-size: 0.72rem; }
.rec-tabs button[aria-pressed="false"] .count { background: var(--brand); color: var(--brand-ink); }
.rec-tabs .muted-count { margin-left: 4px; opacity: 0.7; font-weight: 500; }
#rec-list { display: grid; gap: 16px; max-width: 980px; }
.rec.dismissed .card { opacity: 0.55; }
.rec.is-new .card { border-color: var(--brand); }
.rec-route { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; }
.rec-statuses { display: flex; flex-wrap: wrap; gap: 6px; }
.rec-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 3px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 0.8rem; color: var(--muted);
}
.rec-status.s-added, .rec-status.s-watched { color: var(--ink); border-color: var(--accent); }
.rec-status.s-new { border-style: dashed; }
.pill.private { border: 1px solid var(--line); color: var(--muted); }
.pill.private .ic { width: 11px; height: 11px; }

.dest-seg { margin-bottom: 10px; flex-wrap: wrap; }
.who-pick { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.who-pick legend { font-weight: 500; font-size: 0.92rem; margin-bottom: 8px; padding: 0; }
.who-opt {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px;
  border: 1px solid var(--line); cursor: pointer; font-weight: 600; font-size: 0.9rem;
}
.who-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.who-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.who-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- scope tabs + "Added by" chips (Coming up) ---------- */
.scope-row { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 18px; }
.fam-chips { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chips-label { flex: none; font-size: 0.78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.fam-chip-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 3px; }
.fam-chip-list::-webkit-scrollbar { display: none; }
.fchip {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 3px;
  border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink); cursor: pointer; font: 600 0.85rem var(--body);
}
.fchip:hover { border-color: var(--muted); }
.fchip.all { padding: 0 14px; }
.fchip-name { display: none; padding-right: 8px; }
.fchip[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.fchip[aria-pressed="true"] .fchip-name { display: inline; }
.fchip.all[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.fchip-dot {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font: 700 0.62rem var(--body);
  box-shadow: 0 0 0 2px var(--bg);
}
@media (max-width: 599px) {
  .scope-row { flex-direction: column; align-items: stretch; }
}

/* ---------- about / help page: larger, roomier type for readability ---------- */
.page-about > * { max-width: 780px; }
.about-lead { font-size: 1.15rem; line-height: 1.6; margin-bottom: 18px; }
.about-sec { font-size: 1.06rem; line-height: 1.65; }
.about-sec > h2 { display: flex; align-items: center; gap: 10px; font-size: 1.45rem; }
.about-sec > h2 .ic { width: 26px; height: 26px; color: var(--accent); }
.about-sec h3 { font-size: 1.1rem; margin: 18px 0 6px; }
.about-sec p + p { margin-top: 10px; }
.about-sec ol, .about-sec ul { margin: 6px 0 0; padding-left: 1.4em; display: grid; gap: 6px; }
.about-go { margin-top: 16px; }
.about-help { border-color: var(--brand); }
.top-actions { gap: 6px; }

/* About: collapsible sections with a highlighted "What it's for" line */
details.about-sec { padding: 0; overflow: hidden; }
details.about-sec > summary { list-style: none; cursor: pointer; display: grid; gap: 10px; padding: 16px 18px; }
details.about-sec > summary::-webkit-details-marker { display: none; }
details.about-sec > summary:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
details.about-sec > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.about-title { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.02em; }
.about-title > .ic { width: 26px; height: 26px; color: var(--brand); flex: none; }
.about-toggle { margin-left: auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); transition: transform 0.15s; }
.about-toggle .ic { width: 18px; height: 18px; }
details.about-sec[open] .about-toggle { transform: rotate(90deg); }
.about-what {
  display: block; padding: 10px 14px; border-left: 4px solid var(--bulb); border-radius: 4px 10px 10px 4px;
  background: color-mix(in srgb, var(--bulb) 12%, var(--surface)); font-size: 1.06rem; line-height: 1.55;
}
.about-what strong:first-child { color: var(--countdown); }
.about-body { padding: 0 18px 18px; border-top: 1px solid var(--line); margin: 0 0 0; }
.about-body > :first-child { margin-top: 14px; }
.about-sec.about-help { padding: 18px; }

/* ---------- brand: sign-in hero + share header ---------- */
.brand-hero { display: grid; gap: 10px; justify-items: start; }
.brand.brand-lg { font-size: 1.9rem; padding: 0.3rem 0.7rem; border-radius: 7px; }
.brand-hero .tagline { font-size: 1.15rem; font-weight: 600; }
.pub-top { gap: 12px; }
.pub-tagline { font-size: 0.9rem; }
@media (max-width: 519px) { .pub-tagline { display: none; } }

/* ---------- date badges: "calendar ticket" (grid tiles, phone poster badge, share page) ----------
   Fixed colours in both themes so it reads on any poster: deep-coral month band (white text, 4.9:1)
   over a cream day panel (charcoal number, ~15:1). Replaces the solid coral badge, which looked muddy
   on dark artwork. */
.tile-date, .poster-date {
  display: flex; flex-direction: column; align-items: stretch; min-width: 34px; padding: 0; overflow: hidden;
  border-radius: 6px; background: #fbf6f2; color: #16181c; line-height: 1; text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.tile-date i, .poster-date .pd-mon {
  order: -1; margin: 0; padding: 3px 5px 2px; background: #c8412c; color: #fff;
  font: 700 0.58rem/1 var(--body); font-style: normal; text-transform: uppercase; letter-spacing: 0.06em;
}
.tile-date b, .poster-date .pd-day { padding: 3px 5px 4px; font: 800 1rem/1 var(--body); }
.poster-date { display: none; }
@media (max-width: 599px) { .poster-date { display: flex; position: absolute; left: 6px; top: 6px; } }
/* The ticket also shows on For you cards and inside the card dialog at every width (neither has the
   timeline's date column), so a title's date always looks the same. */
.rec .poster-date, #dlg-title .poster-date { display: flex; position: absolute; left: 6px; top: 6px; }
/* Countdown pill on card posters (same pill as grid tiles). Narrow card posters on phones
   can't fit it beside the date ticket, so it moves to the bottom of the poster there. */
.poster .tile-count { position: absolute; right: 6px; top: 6px; }
@media (max-width: 519px) { .card .poster .tile-count { top: auto; bottom: 6px; right: auto; left: 6px; } }

/* Where to watch: "Stream" and "Rent or buy" rows, one chip per service. */
.where { display: grid; gap: 6px; }
.where .chips { align-items: center; }
.chips-k { flex: none; min-width: 84px; font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.chip em { font-style: normal; font-size: 0.68rem; font-weight: 700; color: var(--type-doc); margin-left: 2px; }
@media (max-width: 519px) { .chips-k { min-width: 0; flex-basis: 100%; } }

/* ---------- recommendations on Fliks cards + "Who's it for?" ---------- */
.recs { display: grid; gap: 8px; }
.rec-block { display: grid; gap: 6px; padding: 10px 12px; border-radius: 4px 10px 10px 4px; border-left: 3px solid var(--brand); background: var(--note-bg); }
.rec-block.is-new { box-shadow: 0 0 0 1px var(--brand); }
.rec-quote { margin: 0; font-size: 1rem; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
.rec-quote::before { content: "\201C"; color: var(--brand); } .rec-quote::after { content: "\201D"; color: var(--brand); }
.rec-tools { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.85rem; }
.danger-link { color: var(--danger); }
.rec-status.s-listed, .rec-status.s-watched { color: var(--ink); border-color: var(--accent); }
.rec-status.s-passed { opacity: 0.7; }
.pill.foryou { background: var(--brand); color: var(--brand-ink); }

.who-for { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.who-for > legend { font-weight: 600; font-size: 0.95rem; margin-bottom: 8px; padding: 0; }
.who-for .seg { justify-self: start; flex-wrap: wrap; }
.who-people, .who-people-only { display: none; }
form:has(input[name="who"][value="people"]:checked) .who-people { display: grid; gap: 10px; }
form:has(input[name="who"][value="people"]:checked) .who-people-only { display: block; }
/* "Already on Fliks": add-to-list and recommend are two separate actions */
.exist-list { display: grid; gap: 10px; justify-items: start; margin: 4px 0 16px; }
.exist-on { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent); }
.exist-on .ic { width: 18px; height: 18px; }
.exist-rec { padding-top: 14px; border-top: 1px solid var(--line); }
.exist-rec h3 { font-size: 1.05rem; }

/* "Starring" row in the title pop-up */
.cast { display: grid; gap: 8px; }
.cast-list { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cast-list::-webkit-scrollbar { display: none; }
.cast-person { flex: none; width: 74px; display: grid; justify-items: center; gap: 3px; text-align: center; text-decoration: none; color: var(--ink); }
.cast-face {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--surface-2); color: var(--muted); font-weight: 700; border: 2px solid var(--line);
}
.cast-face img { width: 100%; height: 100%; object-fit: cover; }
.cast-person:hover .cast-face { border-color: var(--accent); }
.cast-name { font-size: 0.75rem; font-weight: 600; line-height: 1.2; }
.cast-role { font-size: 0.68rem; color: var(--muted); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Logo text is white on coral in dark mode (logotypes are exempt from text-contrast rules;
   other coral elements keep the dark ink for readability). */
[data-theme="dark"] .brand { color: #fff; }
/* A barely-there shadow so the white logo text separates from the coral. */
.brand { text-shadow: 0 1px 1px rgba(60, 12, 5, 0.28); }

/* ---------- discover ---------- */
.disc-top { margin-bottom: 26px; }
.disc-top > h2 { margin-bottom: 2px; }
.disc-top-note { margin-bottom: 12px; font-size: 0.88rem; }
.disc-soon { margin: 6px 0 4px; }
.disc-more { display: flex; justify-content: center; margin: 10px 0 30px; }
.pill.onfliks {
  position: absolute; left: 6px; bottom: 6px; gap: 5px; padding: 2px 8px 2px 3px;
  background: rgba(10, 12, 16, 0.78); color: #fff;
}
.disc-preview .entry, .disc-preview { margin: 0; }
#dlg-title .disc-preview .poster-date { display: flex; }

/* Discover sections: icon headers, a tinted "most popular" panel, and a divider before Coming soon */
.sec-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.sec-head h2 { margin: 0 0 2px; }
.sec-head .muted { font-size: 0.88rem; }
.sec-icon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand);
}
.sec-icon .ic { width: 22px; height: 22px; }
.disc-popular {
  display: grid; gap: 22px; padding: 18px 18px 8px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
}
/* minmax(0,1fr) + min-width:0 stop the scrolling row from stretching the panel past the page */
.disc-popular { grid-template-columns: minmax(0, 1fr); }
.disc-popular .disc-top { margin-bottom: 0; min-width: 0; }
.disc-top { min-width: 0; }
.disc-divider { border: 0; border-top: 1px solid var(--line); margin: 26px 0 22px; }
.disc-soon { margin: 0 0 6px; }
@media (max-width: 519px) { .disc-popular { padding: 14px 12px 4px; margin-left: -4px; margin-right: -4px; } }
/* Discover controls: type toggle + genre picker */
.disc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
/* Share page: a ticket icon instead of the member's photo (the photo isn't sent to outsiders). */
.pub-icon {
  flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand);
}
.pub-icon .ic { width: 32px; height: 32px; }
.pub-icon.sm { width: 22px; height: 22px; }
.pub-icon.sm .ic { width: 13px; height: 13px; }