/* dark theme shared by every page */
:root {
  --bg: #0d0f14;
  --surface: #171a22;
  --surface-2: #1f2330;
  --line: #2a2f3d;
  --text: #e8e9ed;
  --muted: #8b8f9c;
  --accent: #8fd6ff;
  --accent-dim: rgba(143, 214, 255, 0.15);
  --frost: #e3f4ff;
  --on-accent: #04121d;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
}

a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; }

header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: rgba(23, 26, 34, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 1.4rem; font-weight: 800; text-decoration: none; letter-spacing: -0.02em; }
.logo-mark { position: relative; width: 28px; height: 28px; flex: none; transition: transform 0.4s; }
.logo-mark img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.35s; }
.logo-mark .logo-open { opacity: 0; }
.logo:hover .logo-mark, .logo:focus-visible .logo-mark { transform: scale(1.08); }
.logo:hover .logo-mark img, .logo:focus-visible .logo-mark img { opacity: 0; }
.logo:hover .logo-mark .logo-open, .logo:focus-visible .logo-mark .logo-open { opacity: 1; }
.search { flex: 1; min-width: 160px; max-width: 420px; }
/* header tools: separate buttons with icons, the current page is lit up */
.toolbar { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.tool:hover { border-color: var(--accent); color: var(--frost); }
.tool.active { border-color: var(--accent); background: var(--accent-dim); color: var(--frost); box-shadow: inset 0 -2px 0 var(--accent); }
.tool-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tool-primary:hover { color: var(--on-accent); filter: brightness(1.1); }
.tool-primary.active { background: var(--accent); color: var(--on-accent); }

/* avatar menu (<details>, no JavaScript) */
.avatar-menu { position: relative; }
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: linear-gradient(145deg, var(--frost), var(--accent));
  color: var(--on-accent);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.avatar::-webkit-details-marker { display: none; }
.avatar:hover, .avatar-menu[open] .avatar { border-color: var(--frost); }
.avatar.active { box-shadow: 0 0 0 3px var(--accent-dim); border-color: var(--accent); }
.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.menu-user { padding: 6px 10px 8px; color: var(--muted); font-size: 0.85rem; border-bottom: 1px solid var(--line); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; }
.menu a, .menu button { display: flex; width: 100%; font: inherit; background: none; border: 0; cursor: pointer; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.menu a:hover, .menu a.active, .menu button:hover { background: var(--accent-dim); color: var(--frost); }

main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 32px 16px;
  border-top: 1px solid var(--line);
}
.footer-brand { color: var(--frost); font-weight: 600; }

input, textarea, select {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}
select { padding-right: 32px; appearance: none; cursor: pointer;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fd6ff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center / 16px no-repeat; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
textarea { min-height: 90px; margin: 12px 0; resize: vertical; }

button, .button {
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: 8px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s;
}
button:hover, .button:hover { filter: brightness(1.1); }

.muted { color: var(--muted); }
.flash {
  background: var(--surface);
  border-left: 4px solid var(--accent);
  padding: 10px 14px;
  margin-bottom: 16px;
  border-radius: 4px;
}
.box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin: 16px 0;
}
.form-narrow { max-width: 360px; margin: 40px auto; display: flex; flex-direction: column; gap: 12px; }
.form-narrow h1 { margin: 0 0 8px; }

/* home page hero */
.hero {
  text-align: center;
  padding: 40px 20px 36px;
  margin-bottom: 28px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse at top, rgba(143, 214, 255, 0.2), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}
.hero-logo {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto 12px;
  position: relative;
  filter: drop-shadow(0 0 24px rgba(143, 214, 255, 0.35));
  transition: transform 0.4s;
}
.hero-logo img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.35s; }
.hero-logo .logo-open { opacity: 0; }
.hero-logo:hover { transform: scale(1.06); }
.hero-logo:hover img { opacity: 0; }
.hero-logo:hover .logo-open { opacity: 1; }
.hero-title {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--frost);
  text-shadow: 0 0 28px rgba(143, 214, 255, 0.35);
}
.hero-tagline { margin: 6px 0 0; font-size: clamp(1.05rem, 3vw, 1.3rem); color: var(--accent); font-weight: 600; }
.hero-intro { max-width: 520px; margin: 12px auto 0; color: var(--muted); }
/* home: the header search fades in once the hero search is gone; hidden, it still keeps its
   place so the header doesn't shift */
.search[data-follow] { transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; }
.search.follow-hidden { opacity: 0; visibility: hidden; transform: translateY(-4px); }
.hero-search { display: flex; gap: 8px; max-width: 600px; margin: 22px auto 0; }
.hero-search input { flex: 1; padding: 12px 18px; font-size: 1.05rem; border-radius: 999px; background: var(--bg); }
.hero-search button { padding: 12px 24px; font-size: 1rem; border-radius: 999px; }
.section-title { margin: 0 0 16px; font-size: 1.4rem; }

/* live search dropdown (static/search.js) */
form[data-live-search] { position: relative; }
.live-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  text-align: left;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.live-results a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}
.live-results li.active a { background: var(--accent-dim); color: var(--frost); }
.live-thumb {
  flex: none;
  width: 34px;
  height: 51px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.live-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.live-year { flex: none; color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
/* the search results page: Movies, then People and Profiles as rows of round pictures */
.results-group {
  margin: 0 0 12px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-weight: 400;
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
}
.found-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 18px; }
.found {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 0.25s;
}
.found:hover { border-color: var(--accent); }
.found-face {
  flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--surface-2);
  display: grid; place-items: center; color: var(--muted); font-weight: 700;
}
.found-letter { background: var(--accent-dim); color: var(--accent); }
.found-text { display: flex; flex-direction: column; min-width: 0; }
.found-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.found-detail { color: var(--muted); font-size: 0.85rem; }

/* group names in the dropdown: Movies, People, Profiles */
.live-group {
  padding: 8px 8px 4px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
}
.live-group:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
/* people and profiles get round pictures, the same width as a poster */
.live-face { height: 34px; border-radius: 50%; }
span.live-thumb { display: grid; place-items: center; color: var(--muted); font-weight: 700; }
.live-letter { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-dim); }

/* discover page */
.page-title { margin: 8px 0 12px; font-size: 2rem; letter-spacing: -0.02em; color: var(--frost); }
.section-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.section-links a { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.section-links a:hover { border-color: var(--accent); color: var(--frost); }
.discover-section { margin-bottom: 40px; scroll-margin-top: 80px; }

/* sealed movie cards: a poster under a frost seal + a slate of film details */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
}
.card {
  --poster-w: 136px;
  position: relative;
  display: grid;
  grid-template-columns: var(--poster-w) 1fr;
  /* every card is exactly its poster's height (+ the border): long titles and loglines get cut, never stretch it */
  height: calc(var(--poster-w) * 1.5 + 2px);
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(135deg, var(--surface) 0%, #12151c 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.25s, border-color 0.25s;
}
.card:hover { box-shadow: var(--shadow); border-color: var(--accent); }
.card-poster { position: relative; overflow: hidden; align-self: start; }
.card img, .no-poster { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.card img { transition: filter 0.4s; }
.card.sealed img { filter: saturate(0.45) brightness(0.8); }
.card.sealed:hover img { filter: saturate(0.8) brightness(0.92); }
.no-poster { display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; color: var(--muted); background: var(--surface-2); font-size: 0.85rem; }

/* the seal: the whole poster under a light frost (no blur: the film shows through), the snow and the eye */
.seal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--on-accent);
  background:
    linear-gradient(to top, rgba(160, 212, 246, 0.34), rgba(160, 212, 246, 0.06) 60%);
  transition: opacity 0.4s;
}
.card.sealed:hover .seal::before { opacity: 0; }
/* the snowflakes and the extra frost melt away on hover; the seal stays */
.seal::before { content: ""; position: absolute; inset: 0; background: url("snow.svg") 0 0 / 50px 50px, rgba(160, 212, 246, 0.1); transition: opacity 0.4s; }
/* the site logo pressed into the frost like a seal; on hover the eye opens */
.seal-stamp {
  position: relative;
  width: 64px;
  height: 64px;
  transform: rotate(-10deg);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
  transition: transform 0.4s;
}
.seal-stamp::before, .seal-stamp::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("seal.svg") center / contain no-repeat;
  transition: opacity 0.35s;
}
.seal-stamp::after { background-image: url("seal-open.svg"); opacity: 0; }
.card.sealed:hover .seal-stamp { transform: rotate(0) scale(1.05); }
.card.sealed:hover .seal-stamp::before { opacity: 0; }
.card.sealed:hover .seal-stamp::after { opacity: 1; }
/* the word itself is for screen readers; the stamp says it visually */
.seal-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.card-text { container-type: inline-size; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; font-size: 0.9rem; }
.card-text > * { flex-shrink: 0; }
/* one line each for the details and the original title, two for the title */
.card-meta, .card-original { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-text .card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.card-title { font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; font-weight: 600; line-height: 1.25; color: var(--frost); }
.card-original { color: var(--muted); font-size: 0.85rem; }
.card-year { color: var(--muted); font-variant-numeric: tabular-nums; }
/* the score chip on every card: the open eye and the take | a crowd of eyes and the room's average.
   A half the viewer can't see yet is frosted like a sealed poster. No frame: it's part of the card.
   It shares the card's top line with the year (year left, chip right), the same spot on every card */
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 20px; margin-bottom: 2px; }
.card-top .card-take { margin-left: auto; }
.card-facts { color: var(--muted); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-take {
  display: inline-flex;
  align-items: stretch;
  height: 20px;
  color: var(--frost);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* sized by the card's width (its text is a size container): at most 0.85rem, and never wider than the
     line minus the year, even with "10.0 | 10.0" (about 10.3em) */
  font-size: min(0.85rem, calc((100cqi - 44px) / 10.3));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.take-own, .take-room { display: inline-flex; align-items: center; gap: 0.37em; }
.take-own { padding-right: 0.74em; }
.take-room { padding-left: 0.74em; border-left: 1px solid var(--line); color: #b4c6d4; font-weight: 600; }
.take-own::before, .take-room::before { content: ""; flex: none; height: 0.96em; background: center / contain no-repeat; }
.take-own::before { width: 1.32em; background-image: url("logo-open.svg"); }
.take-room::before { width: 1.55em; background-image: url("crowd.svg"); }
/* frosted: the "?.?" blurred past reading, the eyes dimmed behind the frost */
.card-take .frost { color: transparent; text-shadow: 0 0 6px rgba(227, 244, 255, 0.75); }
.card-take .frost::before { opacity: 0.45; filter: blur(0.6px) grayscale(0.4); }
.card-logline {
  margin: 6px 0 0;
  color: #b4b8c4;
  font-size: 0.84rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* the logline takes what room is left; if that's less than its lines, the last one fades out */
.card-text .card-logline {
  flex-shrink: 1; min-height: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.3em), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.3em), transparent);
}
.badge-small { background: var(--accent); color: var(--on-accent); font-weight: 700; padding: 0 6px; border-radius: 6px; margin: 0 6px; }

/* movie page */
.movie { display: grid; grid-template-columns: 260px 1fr; gap: 28px; }
.big-poster { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.movie h1 { margin-top: 0; }
.big { font-size: 1.6rem; color: var(--accent); }

/* compact rate box: title + note and the live score on one row, the ticks and the button below.
   On wide screens it is exactly as tall as the takes row that replaces it, so nothing jumps */
.rate-box { display: flex; flex-direction: column; justify-content: center; padding: 14px 18px; margin: 18px 0; }  /* = .takes */
@media (min-width: 641px) {
  .rate-box, .takes { box-sizing: border-box; height: var(--verdict-height, 128px); }
}
/* on phones the takes row stacks (two boxes, then the hill), so the rate box grows to match it */
@media (max-width: 640px) {
  .rate-box, .takes { box-sizing: border-box; height: var(--verdict-height-phone, 227px); }
}
.rate-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rate-head h3 { margin: 0; }
.rate-note { margin: 2px 0 0; font-size: 0.85rem; }
.score-hint { color: var(--accent); }
.rate-row { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.rate-row .ruler { flex: 1; min-width: 0; margin-top: 0; }
.rate-row .hold-button { flex: none; min-width: 9.5em; white-space: nowrap; }  /* "Locked" keeps the same size */
@media (max-width: 640px) {  /* phones: the full width for the ruler, the button under it */
  .rate-row { flex-wrap: wrap; gap: 10px; }
  .rate-row .ruler { flex-basis: 100%; }
  .rate-row .hold-button { width: 100%; }
}

/* your comment, written after the seal breaks */
.comment-box { margin: 0 0 18px; }
.comment-box h3 { margin: 0; }
.comment-box textarea { min-height: 0; margin: 8px 0 10px; resize: vertical; }

/* score scrub: thin ticks (1.0-10.0, one per 0.1) slide under a fixed marker. No box, no numbers:
   the big score above says it. Empty until you move it, so no default number anchors your take. */
.score-scrub { --step: 12px; }
.score-value { white-space: nowrap; }
.score-value strong { font-family: Georgia, "Times New Roman", serif; font-size: 2.2rem; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.score-value small { font-size: 0.85rem; color: var(--muted); margin-left: 3px; }
.untouched .score-value strong { color: var(--muted); opacity: 0.6; }
.ruler {
  position: relative; height: 40px; margin-top: 10px; overflow: hidden; cursor: grab; touch-action: pan-y;
  user-select: none; border-radius: 6px;
  /* bright in the middle, fading out towards both edges */
  -webkit-mask-image: linear-gradient(to right, transparent, rgba(0,0,0,0.35) 25%, #000 50%, rgba(0,0,0,0.35) 75%, transparent);
          mask-image: linear-gradient(to right, transparent, rgba(0,0,0,0.35) 25%, #000 50%, rgba(0,0,0,0.35) 75%, transparent);
}
.ruler:active { cursor: grabbing; }
.ruler:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ruler-strip { position: absolute; top: 0; bottom: 0; left: 50%; will-change: transform; }
.ruler-strip.snap { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tick {
  position: absolute; top: 50%; left: calc(var(--i) * var(--step)); width: 1px; height: 14px;
  transform: translateY(-50%); background: var(--muted); border-radius: 1px;
}
.tick.whole { height: 22px; background: var(--text); }
.ruler-marker {
  position: absolute; top: 4px; bottom: 4px; left: 50%; width: 2px; margin-left: -1px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 8px var(--accent); pointer-events: none;
}
.untouched .ruler-marker { opacity: 0.4; box-shadow: none; }

/* score distribution chart */
/* after rating: your take, the average and the distribution as a smooth hill in one row */
.takes { display: grid; grid-template-columns: auto auto 1fr; gap: 12px; margin: 18px 0; }
.take {
  display: flex; flex-direction: column; gap: 2px; min-width: 120px;
  padding: 10px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.take-label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.take-score { font-family: Georgia, "Times New Roman", serif; font-size: 2.1rem; line-height: 1.1; }
.take-mine .take-score { color: var(--accent); }
.take-score small { font-family: system-ui, sans-serif; font-size: 0.85rem; color: var(--muted); margin-left: 2px; }
.take-note { font-size: 0.75rem; color: var(--muted); }
/* rewatch: "Rewatched it?" under your take, then "7.1 → 8.4" with the first take dimmed */
.takes[hidden], .rate-box[hidden] { display: none; }
.rewatch-open { align-self: flex-start; color: var(--muted); text-decoration: underline dotted; text-underline-offset: 3px; }
.rewatch-open:hover, .rewatch-open:focus-visible { color: var(--accent); }
.take-score.rewatched { white-space: nowrap; }
.first-take { color: var(--muted); font-size: 0.6em; }
.rewatch-arrow { margin: 0 0.25em; color: var(--muted); font-family: system-ui, sans-serif; font-size: 0.5em; vertical-align: 0.25em; }
.rewatch-cancel { margin-left: 8px; font-family: system-ui, sans-serif; font-size: 0.75rem; font-weight: 400; color: var(--muted); }
.rewatch-cancel:hover, .rewatch-cancel:focus-visible { color: var(--accent); }
/* density hill: --x is a score's place in % (1 -> 0, 10 -> 100) */
.density-plot, .density-scale { position: relative; margin: 0 6px; }
/* the top 14px is a label lane: the curve stays below it, the avg/you labels sit in it */
.density-plot { height: 54px; margin-top: 2px; border-bottom: 1px solid var(--line); }
.density-plot svg { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 40px; }
.density-line { fill: none; stroke: var(--frost); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0.8; }
.density-avg, .density-you { position: absolute; left: calc(var(--x) * 1%); top: 0; bottom: 0; }
.density-avg { border-left: 1px dashed var(--muted); }
.density-you { width: 2px; margin-left: -1px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.density-avg::before, .density-you::before {
  position: absolute; top: 0; left: 5px;
  font-size: 0.6rem; line-height: 1; letter-spacing: 0.08em; white-space: nowrap; color: var(--muted);
}
.label-left::before { left: auto; right: 5px; }
.density-avg::before { content: "avg"; }
.density-you::before { content: "you"; color: var(--accent); font-weight: 700; }
.density-scale { height: 14px; margin-top: 4px; }
.density-scale span {
  position: absolute; left: calc(var(--x) * 1%); transform: translateX(-50%);
  font-size: 0.65rem; line-height: 1; color: var(--muted);
}

/* hold to lock: the fill grows while the button is held (1s, same as HOLD in rate.js) */
.hold-button { position: relative; overflow: hidden; isolation: isolate; touch-action: none; user-select: none; -webkit-user-select: none; }
.hold-button::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(4, 18, 29, 0.28); transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease-out;
}
.hold-button.holding::before { transform: scaleX(1); transition: transform 1s linear; }
.hold-button.locked::before { transform: scaleX(1); }

/* the reveal, played once right after rating: the row sits behind the seal, the eye opens, the frost
   thaws, the hill draws itself from left to right, then your line drops onto it */
.takes { position: relative; }
.takes-seal {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); pointer-events: none;
  background: url("snow.svg") 0 0 / 50px 50px, linear-gradient(to top, rgba(160, 212, 246, 0.34), rgba(160, 212, 246, 0.12));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: thaw 0.8s ease-in 1.2s forwards;
}
.takes-seal .seal-stamp { animation: stamp-open 0.5s ease 0.5s forwards; }
.takes-seal .seal-stamp::before { animation: fade-out 0.35s ease 0.6s forwards; }
.takes-seal .seal-stamp::after { animation: fade-in 0.35s ease 0.6s forwards; }
.revealing .density-plot svg { clip-path: inset(0 100% 0 0); animation: draw 1s ease-out 1.8s forwards; }
.revealing .density-avg { opacity: 0; animation: fade-in 0.4s ease 2.6s forwards; }
.revealing .density-you { opacity: 0; transform: translateY(-28px); animation: drop 0.5s cubic-bezier(0.3, 1.6, 0.6, 1) 2.9s forwards; }
.density-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.reveal-line {
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 0.95rem; line-height: 1;
  color: var(--accent); white-space: nowrap; opacity: 0; animation: rise 0.6s ease 3.4s forwards;
}
@keyframes thaw { to { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); visibility: hidden; } }
@keyframes stamp-open { to { transform: rotate(0) scale(1.15); } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes draw { to { clip-path: inset(0 0 0 0); } }
@keyframes drop { to { opacity: 1; transform: none; } }
@keyframes rise { from { transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .takes-seal { display: none; }
  .revealing .density-plot svg, .revealing .density-avg, .revealing .density-you, .reveal-line {
    animation: none; opacity: 1; transform: none; clip-path: none;
  }
}

/* messages after saving in place (inplace.js): a short toast at the bottom, nothing shifts */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 50; max-width: calc(100% - 32px);
  padding: 10px 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow); font-size: 0.9rem;
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.toast.shown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
form[aria-busy="true"] button { cursor: progress; }

.comment { border-bottom: 1px solid var(--line); padding: 12px 0; }
.comment p { margin: 6px 0 0; white-space: pre-wrap; }
.votes { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.votes form { margin: 0; }
.vote { padding: 0 8px; background: transparent; color: var(--muted); border: 1px solid var(--line); }
.vote.voted { background: var(--accent); color: var(--on-accent); }
.vote-score { font-weight: 700; min-width: 1.5em; text-align: center; }

/* your own comment, pinned above the others (Edit in place, hold to Delete: comment.js) */
.comment.mine {
  border: 1px solid var(--accent-dim); border-left: 3px solid var(--accent); border-radius: 10px;
  background: var(--surface); padding: 12px 14px; margin: 4px 0 8px;
}
.comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; }
.comment-head .badge-small { margin: 0 8px; }
.mine-votes { margin-left: auto; font-size: 0.85rem; }
.mine-actions { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; }
.mine-actions form { margin: 0; }
button.ghost, .button.ghost, .edit-comment > summary {
  background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 12px; font-size: 0.85rem; font-weight: 600; line-height: 1.4;
}
button.ghost:hover, .button.ghost:hover, .edit-comment > summary:hover { filter: none; color: var(--frost); border-color: var(--accent); }
.edit-comment > summary { list-style: none; cursor: pointer; user-select: none; }
.edit-comment > summary::-webkit-details-marker { display: none; }
.edit-comment[open] { flex: 1; }
.edit-comment[open] > summary { display: none; }
.edit-comment textarea { margin: 0 0 8px; min-height: 0; }
.edit-buttons { display: flex; gap: 8px; }
.edit-buttons button { padding: 4px 14px; font-size: 0.85rem; line-height: 1.4; border: 1px solid var(--accent); }
/* while editing, the form takes the text's place and Delete steps aside */
.comment.mine:has(.edit-comment[open]) .comment-text,
.comment.mine:has(.edit-comment[open]) .delete-comment { display: none; }
.delete-comment .hold-button::before { background: rgba(255, 120, 120, 0.28); }
.delete-comment .hold-button:hover, .delete-comment .hold-button.holding { color: #ffb3b3; border-color: #ff8f8f; }
/* right after posting: a note where the box was, linking down to your pinned comment, which glows once */
.comment-posted { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0 0 18px; color: var(--frost); }
.comment-posted a { color: var(--accent); text-decoration: none; font-weight: 600; }
.comment-posted a:hover { text-decoration: underline; }
.comment.mine { scroll-margin-top: 90px; }
.comment.mine:target { animation: mine-glow 1.6s ease-out; }
@keyframes mine-glow { from { box-shadow: 0 0 0 4px var(--accent); } to { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .comment.mine:target { animation: none; } }
.sealed-note {
  margin: 8px 0 0; padding: 12px 0; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.8rem; letter-spacing: 0.04em;
}

/* phone width */
@media (max-width: 640px) {
  header { padding: 10px 12px; gap: 8px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .search.follow-hidden { display: none; }
  .logo { font-size: 1.1rem; gap: 8px; }
  .logo-mark { width: 26px; height: 26px; }
  .toolbar { gap: 5px; }
  .tool { padding: 7px 10px; font-size: 0.85rem; }
  .tool:has(.icon) { padding: 7px; }
  /* icon-only tools on phones; the label stays for screen readers */
  .tool .icon + .tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  main { padding: 16px 12px; }
  .hero { padding: 28px 14px 24px; border-radius: 14px; }
  .hero-logo { width: 68px; height: 68px; margin-bottom: 10px; }
  .hero-search { flex-direction: column; }
  .hero-search button { width: 100%; }
  .grid { grid-template-columns: 1fr; gap: 12px; }
  .card { --poster-w: 112px; }
  .card-title { font-size: 1.05rem; }
  .card-logline { -webkit-line-clamp: 3; }
  .movie { grid-template-columns: 1fr; }
  .big-poster { max-width: 220px; }
}

/* movie page: director line, cast and facts */
.directed-by { margin: -8px 0 4px; color: var(--muted); }
.directed-by strong { color: var(--accent); font-weight: 600; }
.tagline { font-family: Georgia, "Times New Roman", serif; font-style: italic; color: var(--frost); opacity: 0.8; }
.film-section { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px; }
.cast-member { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; color: var(--text); text-decoration: none; }
.cast-member:hover strong { color: var(--accent); }
.cast-member img { transition: filter 0.2s; }
.cast-member:hover img { filter: brightness(1.1); }
.directed-by a, .film-facts dd a { color: inherit; text-decoration: none; }
.directed-by a:hover, .film-facts dd a:hover { color: var(--accent); text-decoration: underline; }

/* person page: portrait, life dates and biography, then their films */
.person { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; margin-top: 8px; }
.person-photo { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius); background: var(--surface-2); }
.person-photo.no-photo { display: grid; place-items: center; font-size: 3rem; color: var(--muted); }
.person h1 { margin-top: 0; }
.person-life { margin: 0 0 4px; color: var(--muted); }
.person-bio { max-width: 70ch; line-height: 1.6; }
.person-bio-more summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.person-bio-more[open] summary { margin-bottom: 4px; }
/* director completion: a strip of film, one frame per film they directed, lit where you've seen it */
.completion { display: flex; align-items: center; gap: 12px; margin: 0 auto 0 24px; }
.filmstrip {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 9px 6px; border-radius: 3px; background-color: #07080b;
  /* sprocket holes along both edges */
  background-image:
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(160, 212, 246, 0.22) 3px 7px, transparent 7px 10px),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(160, 212, 246, 0.22) 3px 7px, transparent 7px 10px);
  background-size: 100% 3px, 100% 3px;
  background-position: 0 3px, 0 calc(100% - 3px);
  background-repeat: no-repeat;
}
.frame { display: block; width: 16px; height: 12px; border-radius: 2px; border: 1px solid #2c3442; background: #10141b; transition: transform 0.15s; }
/* long careers (an actor's 70 films) get smaller frames, so the strip stays a strip */
.filmstrip.dense { gap: 2px; }
.filmstrip.dense .frame { width: 9px; height: 8px; border-radius: 1px; }
.frame.seen { background: linear-gradient(160deg, var(--frost), var(--accent)); border-color: var(--accent); box-shadow: 0 0 6px rgba(143, 214, 255, 0.35); }
.frame:hover, .frame:focus-visible { transform: scale(1.25); border-color: var(--frost); }
.completion-count { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.completion-count strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.4rem; color: var(--frost); }
/* phones: the strip gets its own line under the heading */
@media (max-width: 640px) {
  .section-head:has(.completion) { flex-wrap: wrap; row-gap: 8px; }
  .completion { order: 3; flex-basis: 100%; min-width: 0; margin: 0 0 16px; }
  /* one row only: the frames narrow to fit; a career too long for that shows just the count */
  .filmstrip { flex-wrap: nowrap; flex: 0 1 auto; min-width: 0; }
  .filmstrip .frame { flex: 0 1 16px; min-width: 0; }
  .filmstrip.dense { gap: 1px; }
  .filmstrip.dense .frame { flex-basis: 9px; }
  .filmstrip.phone-hide { display: none; }
  .completion-count { flex: none; }
}
/* upright poster cards: four in a row, title and role under the poster */
.poster-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.poster-card { display: flex; flex-direction: column; height: auto; }
.poster-card .card-poster { align-self: stretch; }
.poster-card .seal-stamp { width: 56px; height: 56px; }
.poster-card-text { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; container-type: inline-size; }
/* narrow poster cards (Discover's row, phones): the chip can't share the line with the year, so on every
   such card it goes under it, a little smaller — the same on all of them, so they still line up */
@container (max-width: 185px) {
  .poster-card-text .card-top { flex-direction: column; align-items: flex-start; justify-content: flex-start; height: auto; gap: 3px; margin-bottom: 4px; }
  .poster-card-text .card-top .card-take { margin-left: 0; font-size: min(0.75rem, calc(100cqi / 10.3)); height: 18px; }
}
.poster-card .card-title { font-size: 1rem; }
.poster-card .card-year { font-size: 0.85rem; }
.poster-card-role {
  color: var(--muted); font-size: 0.8rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cast-member img, .cast-member .no-photo {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius);
  background: var(--surface-2); margin-bottom: 6px;
}
.cast-member .no-photo { display: grid; place-items: center; font-size: 2rem; color: var(--muted); }
.film-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.film-facts dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.film-facts dt { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; padding-top: 2px; }
.film-facts dd { margin: 0; }
.back-link { display: inline-block; margin-top: 8px; color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.back-link:hover { color: var(--accent); }

/* home page sections */
.home-section { margin-bottom: 44px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.see-all { color: var(--accent); text-decoration: none; font-size: 0.9rem; white-space: nowrap; }
.see-all:hover { text-decoration: underline; }
.section-note { margin: -8px 0 16px; color: var(--muted); font-size: 0.9rem; }
/* under the poster: the buttons stack at the poster's width */
.movie-side { display: flex; flex-direction: column; gap: 14px; }
.movie-actions { display: flex; flex-direction: column; gap: 8px; }
.movie-actions form { margin: 0; }
.movie-actions button { width: 100%; }
/* toggles: an icon and a label. Pressed (on the list, watched) turns into an outlined chip */
.toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.toggle[aria-pressed="true"] { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.toggle:disabled { cursor: default; filter: none; }
/* how many people: a small number at the button's right end, behind a hairline that runs its full height.
   The label stays centred in the rest of the button */
.toggle:has(.toggle-count) { padding-left: 12px; padding-right: 0; gap: 7px; }
.toggle:has(.toggle-count) .icon { margin-left: auto; }
.toggle-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toggle-count {
  align-self: stretch; display: flex; align-items: center; justify-content: center; flex: none;
  width: 3.6em; margin: -10px 0 -10px auto; padding: 0 4px;  /* one width, so the hairlines line up */
  border-left: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0.8;
}
.watched-note { color: var(--accent); font-weight: 600; text-align: center; }
.badge-small.no-take { background: transparent; color: var(--muted); border: 1px dashed var(--line); }
@media (max-width: 640px) {  /* phones: the two buttons side by side under the poster */
  .movie-actions { flex-direction: row; flex-wrap: wrap; }
  .movie-actions form { flex: 1; }
  .watched-note { flex-basis: 100%; text-align: left; }
}

.card-takes {
  align-self: flex-start; margin-top: 6px; padding: 2px 10px; border-radius: 999px;
  background: var(--accent-dim); color: var(--accent); font-size: 0.8rem; font-weight: 600;
}
.recent-takes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.recent-takes li {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px;
  padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.recent-takes img, .recent-takes .thumb { display: block; width: 40px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; background: var(--surface-2); }
.recent-text { font-size: 0.92rem; min-width: 0; }
.recent-text a { color: var(--frost); text-decoration: none; font-weight: 600; }
.recent-text a:hover { color: var(--accent); }
.recent-score { font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; color: var(--accent); }
.recent-score.sealed-chip {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; background: var(--frost); color: var(--on-accent); opacity: 0.75;
}

@media (max-width: 640px) {
  .recent-takes { grid-template-columns: 1fr; }
  .takes { grid-template-columns: 1fr 1fr; }
  .density { grid-column: 1 / -1; }
  .cast { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .person { grid-template-columns: 1fr; }
  .person-photo { max-width: 180px; }
  .poster-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .film-facts { grid-template-columns: 1fr; }
  .film-facts dl { grid-template-columns: 1fr; gap: 2px; }
  .film-facts dd { margin-bottom: 10px; }
}
/* no scroll-behavior: smooth here: browsers apply it to restoring the scroll on reload too, so the page
   glided up from the bottom. static/scroll.js glides only for clicked in-page links */

/* profile: taste match and contrarian score */
.profile-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 8px 0 28px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; }
.stat-title {
  margin: 0 0 6px; color: var(--muted); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.stat-big { margin: 0; font-size: 1.8rem; font-weight: 700; color: var(--frost); line-height: 1.2; }
.stat-note { margin: 6px 0 0; font-size: 0.9rem; }
.gauge {
  position: relative; height: 8px; margin: 14px 0 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
}
.gauge-dot {
  position: absolute; top: 50%; left: calc(var(--x) * 1%); width: 16px; height: 16px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--frost); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
}
.gauge-ends { display: flex; justify-content: space-between; font-size: 0.75rem; }
.meter { height: 8px; margin: 14px 0 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.meter span { display: block; height: 100%; width: calc(var(--p) * 1%); border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent)); }

/* film of the day (home): today's film, big and sealed, and yesterday's room, unsealed */
.day-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.day-today {
  display: grid; grid-template-columns: 180px 1fr; text-decoration: none; color: var(--text);
  background: radial-gradient(ellipse at top right, rgba(143, 214, 255, 0.14), transparent 60%),
    linear-gradient(135deg, var(--surface) 0%, #12151c 100%);
  border: 1px solid var(--accent-dim); border-radius: var(--radius); overflow: hidden;
  transition: box-shadow 0.25s, border-color 0.25s;
}
.day-today:hover { box-shadow: var(--shadow); border-color: var(--accent); }
/* one card on its own, so the poster can fill its full height */
.day-today .card-poster { align-self: stretch; }
.day-today .card-poster img, .day-today .no-poster { width: 100%; height: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.day-today.sealed img { filter: saturate(0.45) brightness(0.8); }
.day-text { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; min-width: 0; }
.day-title { font-family: Georgia, "Times New Roman", serif; font-size: 1.8rem; line-height: 1.15; color: var(--frost); }
.day-text .card-logline { -webkit-line-clamp: 4; margin-top: 4px; }
.day-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: auto; padding-top: 12px; font-size: 0.9rem; }
.day-cta { padding: 8px 20px; border-radius: 999px; }
.day-chip {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent);
  font-family: Georgia, "Times New Roman", serif; font-size: 1rem;
}
.day-yesterday {
  display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 0.25s;
}
.day-yesterday:hover { border-color: var(--accent); }
.day-y-film { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.day-y-film img, .day-y-film .thumb { width: 56px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; background: var(--surface-2); display: block; }
.day-y-film > div { display: flex; flex-direction: column; min-width: 0; }
.day-y-title { font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; color: var(--frost); }
.day-y-room { display: flex; gap: 22px; }
.day-y-room strong { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 1.9rem; line-height: 1.1; }
.day-you { color: var(--accent); }
.day-y-line { margin: 0; font-size: 0.9rem; }
.day-y-cta { display: block; margin-top: 6px; color: var(--accent); font-weight: 600; }
@media (max-width: 640px) {
  .day-grid { grid-template-columns: 1fr; gap: 12px; }
  .day-today { grid-template-columns: 112px 1fr; }
  .day-text { padding: 12px 14px; }
  .day-title { font-size: 1.3rem; }
  .day-text .card-logline { -webkit-line-clamp: 3; }
}

/* the movie page while the film of the day's room is sealed: your take, then the wait */
.takes.held { grid-template-columns: auto 1fr; }
.held-room { position: relative; justify-content: center; padding-right: 70px; }
.held-title { font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; color: var(--frost); }
.held-stamp { position: absolute; right: 18px; top: 50%; width: 52px; height: 52px; transform: translateY(-50%); opacity: 0.8; }
@media (max-width: 640px) {
  .takes.held { grid-template-columns: 1fr; }
  .held-room { padding-right: 16px; }
  .held-stamp { display: none; }
}

/* profile: hot takes (rows with a 1-10 track) beside the top / controversial comments */
.profile-takes { display: grid; grid-template-columns: 3fr 2fr; gap: 28px; margin-bottom: 8px; }
.profile-takes .section-head h2 { margin-top: 0; }
@media (max-width: 860px) { .profile-takes { grid-template-columns: 1fr; gap: 24px; } }
.hot-list, .pc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hot-row {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; padding: 8px 14px 8px 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none;
}
.hot-row:hover { border-color: var(--accent); }
.row-thumb { display: block; width: 40px; height: 60px; border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.row-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.row-thumb.sealed img { filter: saturate(0.4) brightness(0.7); }
.hot-body { display: grid; gap: 4px; min-width: 0; }
.hot-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hot-scores { display: flex; gap: 12px; font-size: 0.8rem; }
.hot-theirs { color: var(--muted); }
.hot-theirs strong { color: var(--accent); font-family: Georgia, "Times New Roman", serif; font-size: 0.95rem; }
.hot-sealed, .pc-sealed {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
/* the 1-10 track: the room is a hollow ring, their take the lit dot, the gap the bright stretch */
.hot-track { position: relative; height: 4px; margin: 6px 7px 4px; border-radius: 999px; background: var(--surface-2); }
.hot-gap { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%);
  border-radius: inherit; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); }
.hot-room, .hot-dot { position: absolute; top: 50%; left: calc(var(--x) * 1%); border-radius: 50%; transform: translate(-50%, -50%); }
.hot-room { width: 10px; height: 10px; background: var(--bg); border: 2px solid var(--muted); box-sizing: border-box; }
.hot-dot { width: 12px; height: 12px; background: var(--frost); box-shadow: 0 0 0 2px var(--accent), 0 0 8px var(--accent); }
.hot-diff { display: grid; justify-items: end; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hot-diff strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.4rem; letter-spacing: 0; color: var(--frost); line-height: 1; }
.hot-diff.below strong::before { content: "−"; }
.hot-diff.above strong::before { content: "+"; }
.hot-page .hot-list { max-width: 760px; }

/* comments on a profile: two tabs (radio buttons, no JS) */
.pc-tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.pc-tab-labels { display: flex; gap: 6px; margin-bottom: 10px; }
.pc-tab-labels label {
  padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.8rem; color: var(--muted); cursor: pointer;
}
#pc-top:checked ~ .pc-tab-labels [for="pc-top"], #pc-split:checked ~ .pc-tab-labels [for="pc-split"] {
  border-color: var(--accent); background: var(--accent-dim); color: var(--frost);
}
#pc-top:focus-visible ~ .pc-tab-labels [for="pc-top"], #pc-split:focus-visible ~ .pc-tab-labels [for="pc-split"] {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.pc-list-split, #pc-split:checked ~ .pc-list-top { display: none; }
#pc-split:checked ~ .pc-list-split { display: grid; }
.pc { padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.pc-film { font-weight: 600; color: var(--text); text-decoration: none; }
.pc-film:hover { color: var(--accent); }
.pc .badge-small { font-size: 0.8rem; }
.pc-votes { font-size: 0.8rem; white-space: nowrap; }
.pc-text { margin: 6px 0 0; font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pc-text.pc-sealed { font-size: 0.7rem; }
.pc-empty { padding: 4px 0; }

/* ================================================================ avatars and following */
/* a profile's face: its avatar (static/avatars) or its letter, always a small circle */
.face {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; background: var(--surface-2); border: 1px solid var(--line);
}
.face-letter { background: var(--accent-dim); color: var(--accent); font-weight: 700; font-size: 0.9rem; }
.avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.avatar:has(img) { background: var(--surface-2); overflow: hidden; }

/* profile head: a slightly bigger face beside the name, the bio under it, counts, and Follow / Edit */
.profile-head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 20px; margin: 8px 0 28px;
}
.face-big {
  width: 76px; height: 76px; font-size: 1.9rem; border: 2px solid var(--line);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--accent-dim), 0 8px 24px rgba(0, 0, 0, 0.45);
}
.profile-id { min-width: 0; }
.profile-id h1 { margin: 0; font-size: 2rem; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.profile-bio { margin: 4px 0 0; color: var(--text); opacity: 0.85; max-width: 60ch; overflow-wrap: anywhere; }
.profile-counts { display: flex; gap: 16px; margin: 6px 0 0; font-size: 0.9rem; }
.profile-counts a { color: var(--muted); text-decoration: none; }
.profile-counts a:hover { color: var(--accent); }
.profile-counts strong { color: var(--frost); font-weight: 700; }
.profile-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.profile-hidden { font-size: 0.8rem; }
.profile-section { margin-bottom: 8px; }

/* Follow / Following: a quiet button once you follow; hovering it offers Unfollow */
.follow-form { margin: 0; }
.follow-button { min-width: 104px; padding: 7px 16px; font-size: 0.9rem; text-align: center; }
.follow-button.following { background: transparent; color: var(--frost); border: 1px solid var(--line); }
.follow-button .when-hover { display: none; }
.follow-button.following:hover, .follow-button.following:focus-visible { filter: none; border-color: #e58a8a; color: #f2b0b0; }
.follow-button.following:hover .when-idle, .follow-button.following:focus-visible .when-idle { display: none; }
.follow-button.following:hover .when-hover, .follow-button.following:focus-visible .when-hover { display: inline; }

/* a person page's name with its Follow button */
.person-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.person-title h1 { margin: 0.4em 0; }

/* rows of profiles: followers, following, who to follow */
.profile-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.profile-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.profile-row-link { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: var(--text); text-decoration: none; }
.profile-row-link:hover .profile-row-name { color: var(--accent); }
.profile-row-text { display: flex; flex-direction: column; min-width: 0; }
.profile-row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-row-detail { color: var(--muted); font-size: 0.8rem; }
.profile-row .follow-button { min-width: 92px; padding: 5px 12px; font-size: 0.82rem; }
main > .profile-rows { max-width: 560px; }
.found-list + .results-group { margin-top: 28px; }
.follow-tabs { display: flex; gap: 6px; margin: 0 0 20px; }
.follow-tabs a {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted);
  text-decoration: none; font-weight: 600; font-size: 0.9rem;
}
.follow-tabs a.active { border-color: var(--accent); background: var(--accent-dim); color: var(--frost); }

/* edit profile */
.edit-profile { max-width: 640px; display: grid; gap: 18px; }
.edit-card {
  margin: 0; padding: 16px 20px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.edit-card legend {
  padding: 0 6px; margin-left: -6px; color: var(--muted); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.edit-card textarea { margin: 6px 0 4px; min-height: 0; }
.field-note { margin: 4px 0 0; font-size: 0.82rem; }
.account-card { display: grid; gap: 10px; }
.account-card .field-note { margin: 0; }
.account-card button { justify-self: start; }
.account-email { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.account-state {
  padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 0.75rem; font-weight: 600;
}
.account-state.ok { border-color: var(--accent); color: var(--frost); }
.account-resend { margin-top: -10px; }
.account-delete { border-color: rgba(200, 106, 106, 0.4); }
.account-sure { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.account-sure input { width: auto; margin: 0; }
.link-button { padding: 0; background: none; border: 0; color: var(--accent); font: inherit; font-size: 0.85rem; cursor: pointer; }
.link-button:hover { filter: none; text-decoration: underline; }
.avatar-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin-top: 6px; }
.avatar-choice {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px;
  border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.avatar-choice input { position: absolute; opacity: 0; pointer-events: none; }
.avatar-choice:hover { background: var(--surface-2); }
.avatar-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); }
.avatar-choice:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-dim); }
.face-pick { width: 60px; height: 60px; font-size: 1.5rem; }
.avatar-name { font-size: 0.78rem; color: var(--muted); text-align: center; line-height: 1.2; }
.avatar-choice:has(input:checked) .avatar-name { color: var(--frost); }
.section-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.section-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
}
.section-item.off .section-show span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.section-show { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.section-show input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.section-moves { display: flex; gap: 4px; }
.move {
  width: 32px; height: 32px; padding: 0; border-radius: 8px; background: transparent; color: var(--frost);
  border: 1px solid var(--line); font-size: 1rem; line-height: 1;
}
.move:hover:not(:disabled) { border-color: var(--accent); filter: none; }
.move:disabled { opacity: 0.3; cursor: default; }
.edit-buttons { display: flex; gap: 10px; }

/* feed: the day's events, newest first; who to follow and coming-up films on the side */
.feed-page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.feed-main h1 { margin-top: 0.3em; }
.feed-day {
  margin: 22px 0 8px; color: var(--accent); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
}
.feed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.feed-item {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) 36px; gap: 12px; align-items: start;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.feed-face { display: block; line-height: 0; text-decoration: none; }
.feed-body { min-width: 0; }
.feed-line { margin: 0; font-size: 0.93rem; line-height: 1.45; }
.feed-user, .feed-film { color: var(--frost); font-weight: 600; text-decoration: none; }
.feed-user:hover, .feed-film:hover { color: var(--accent); }
.feed-line .badge-small { margin: 0 0 0 4px; font-size: 0.82rem; }
.sealed-chip {
  display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 4px; background: var(--frost); color: var(--on-accent);
  font-family: ui-monospace, Menlo, monospace; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  vertical-align: 2px; opacity: 0.75;
}
.feed-comment {
  margin: 6px 0 0; padding-left: 10px; border-left: 2px solid var(--accent-dim); color: var(--text); opacity: 0.85;
  font-size: 0.9rem; white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.feed-time { display: block; margin-top: 2px; font-size: 0.78rem; }
.feed-poster { display: block; width: 36px; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.feed-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feed-release { border-color: rgba(143, 214, 255, 0.35); }
.feed-empty p { margin: 0; }
.feed-older { margin-top: 18px; }
.feed-side { position: sticky; top: 84px; display: grid; gap: 16px; margin-top: 12px; }
.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 14px 12px; }
.side-card .stat-title { margin-bottom: 10px; }
.side-card .profile-row { padding: 6px 0; background: none; border: 0; border-radius: 0; }
.side-card .profile-row + .profile-row { border-top: 1px solid var(--line); }
.side-card .profile-rows { gap: 0; }
.soon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.9rem; }
.soon-list li { display: flex; flex-direction: column; }
.soon-list a { color: var(--frost); font-weight: 600; text-decoration: none; }
.soon-list a:hover { color: var(--accent); }
.soon-list .muted { font-size: 0.8rem; }

@media (max-width: 860px) {
  .feed-page { grid-template-columns: 1fr; gap: 8px; }
  .feed-side { position: static; margin-top: 16px; }
}
@media (max-width: 640px) {
  .profile-head { grid-template-columns: auto 1fr; gap: 6px 14px; }
  .profile-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .face-big { width: 60px; height: 60px; font-size: 1.5rem; }
  .profile-id h1 { font-size: 1.6rem; }
  .feed-item { grid-template-columns: 28px minmax(0, 1fr) 32px; gap: 10px; padding: 10px; }
  .feed-item .face { width: 28px; height: 28px; }
  .feed-poster { width: 32px; }
}

/* ================================================================ lists */
/* a page title with a button beside it (Discover, lists pages) */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-head .button { padding: 7px 16px; font-size: 0.9rem; }

/* list cards: the first five films as frames on a strip of film, sprocket holes along both edges */
.list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.list-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--text); overflow: hidden;
  background: linear-gradient(135deg, var(--surface) 0%, #12151c 100%);
  border: 1px solid var(--line); border-radius: var(--radius); transition: box-shadow 0.25s, border-color 0.25s;
}
.list-card:hover { box-shadow: var(--shadow); border-color: var(--accent); }
.list-strip {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 13px 8px; background-color: #07080b;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 4px, rgba(160, 212, 246, 0.2) 4px 9px, transparent 9px 13px),
    repeating-linear-gradient(90deg, transparent 0 4px, rgba(160, 212, 246, 0.2) 4px 9px, transparent 9px 13px);
  background-size: 100% 4px, 100% 4px; background-position: 0 4px, 0 calc(100% - 4px); background-repeat: no-repeat;
}
.strip-frame { position: relative; aspect-ratio: 2 / 3; border-radius: 2px; overflow: hidden; background: #10141b; border: 1px solid #1c222d; }
.strip-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 0.4s; }
/* unrated: under frost, like every sealed poster */
.strip-frame.sealed img { filter: saturate(0.45) brightness(0.75); }
.strip-frame.sealed::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(160, 212, 246, 0.3), rgba(160, 212, 246, 0.05) 60%);
}
.strip-frame.empty { background: repeating-linear-gradient(135deg, #0c0f15 0 6px, #0f131a 6px 12px); }
.list-card:hover .strip-frame.sealed img { filter: saturate(0.75) brightness(0.88); }
.list-card-text { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; min-width: 0; flex: 1; }
.list-card-title {
  font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; font-weight: 600; line-height: 1.25; color: var(--frost);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.list-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.list-card-by { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 0.85rem; }
.list-card-by .face { width: 22px; height: 22px; font-size: 0.7rem; }
.list-card-by span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-card-saves { flex: none; color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }

/* a list's page: what it is and who made it, Save / Edit on the right, then the films */
.list-head { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px 24px; margin: 12px 0 18px; }
.list-id { min-width: 0; }
.list-title { margin: 4px 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 2.2rem; font-weight: 600; color: var(--frost); overflow-wrap: anywhere; }
.list-by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 0.9rem; }
.list-by a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; text-decoration: none; }
.list-by a:hover { color: var(--accent); }
.list-by .face { width: 24px; height: 24px; font-size: 0.75rem; }
.list-description { margin: 12px 0 0; max-width: 65ch; line-height: 1.6; opacity: 0.9; overflow-wrap: anywhere; }
.list-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.list-saves { font-size: 0.8rem; }
.list-progress { margin: 0 0 22px; }

.list-films { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 860px; }
.list-film {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 10px 16px 10px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.list-films.ranked .list-film { grid-template-columns: 52px 72px minmax(0, 1fr); padding-left: 4px; }
.list-rank {
  justify-self: end; font-family: Georgia, "Times New Roman", serif; font-size: 2rem; line-height: 1; color: var(--frost);
  font-variant-numeric: tabular-nums; opacity: 0.9;
}
.list-film:nth-child(-n+3) .list-rank { color: var(--accent); text-shadow: 0 0 18px rgba(143, 214, 255, 0.35); }
.list-film-poster { display: block; border-radius: 6px; overflow: hidden; }
.list-film-poster img, .list-film-poster .no-poster { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.list-film.sealed .list-film-poster img { filter: saturate(0.45) brightness(0.8); }
.list-film .seal-stamp { width: 34px; height: 34px; }
.list-film-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.list-film-title { font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; font-weight: 600; color: var(--frost); text-decoration: none; }
.list-film-title:hover { color: var(--accent); }
.list-note {
  margin: 6px 0 0; padding-left: 10px; border-left: 2px solid var(--accent-dim); font-size: 0.92rem; font-style: italic;
  color: var(--text); opacity: 0.85; overflow-wrap: anywhere;
}

/* new / edit list */
.field { display: grid; gap: 4px; margin-top: 10px; font-weight: 600; font-size: 0.9rem; }
.field textarea { margin: 0; min-height: 0; font-weight: 400; }
.field input { font-weight: 400; }
.kind-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.kind-choice {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); transition: border-color 0.15s, background 0.15s;
}
.kind-choice input { position: absolute; opacity: 0; pointer-events: none; }
.kind-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); }
.kind-choice:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-dim); }
.kind-name { font-weight: 700; color: var(--frost); }
.kind-detail { font-size: 0.8rem; color: var(--muted); }
.list-editor { max-width: 720px; }
.list-search { display: flex; gap: 8px; margin-top: 6px; }
.list-search button { flex: none; padding: 0 16px; }
.add-results { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 6px; }
.add-result, .list-item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 6px 8px 6px 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
}
.add-result-text, .list-item-text { display: flex; flex-direction: column; min-width: 0; }
.add-result-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add-result-text .muted { font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add-button { padding: 6px 14px; font-size: 0.85rem; }
.add-button:disabled { opacity: 0.4; cursor: default; filter: none; }
.add-on { font-size: 0.8rem; padding-right: 6px; }
.list-items { gap: 6px; }
.list-items.ranked .list-item { grid-template-columns: 26px 40px minmax(0, 1fr) auto; }
.list-item-rank { justify-self: end; font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; color: var(--frost); }
.list-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item-title .muted { font-size: 0.85rem; }
.list-item-text input { margin-top: 4px; padding: 5px 9px; font-size: 0.85rem; background: var(--bg); }
.list-item .row-thumb { width: 40px; height: 60px; }
.move.remove { color: var(--muted); }
.move.remove:hover { color: #f2b0b0; border-color: #e58a8a; }
.danger-zone { max-width: 720px; margin-top: 28px; }
.danger-zone summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; width: max-content; }
.danger-zone summary:hover { color: #f2b0b0; }
.danger-zone form { margin-top: 8px; padding: 12px 16px; border: 1px solid #5a2c2c; border-radius: var(--radius); }
.danger-zone p { margin: 0 0 10px; }
button.danger { background: #c86a6a; color: #1a0909; }

/* the movie page's "Add to list": a menu under the two toggles */
.list-menu > summary { list-style: none; cursor: pointer; user-select: none; width: 100%; }
.list-menu > summary::-webkit-details-marker { display: none; }
.list-menu[open] > summary { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.list-menu-body {
  display: grid; gap: 2px; margin-top: 6px; padding: 4px; max-height: 280px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.list-menu-body form { margin: 0; }
.movie-actions .list-choice, .list-choice {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; border-radius: 8px; background: transparent; color: var(--text); font-weight: 500; font-size: 0.88rem;
  text-align: left; text-decoration: none;
}
.list-choice:hover { background: var(--accent-dim); color: var(--frost); filter: none; }
.list-choice[aria-pressed="true"] { color: var(--frost); }
.list-check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line); color: var(--accent); }
.list-check .icon { width: 13px; height: 13px; stroke-width: 3; }
.list-choice[aria-pressed="true"] .list-check { border-color: var(--accent); background: var(--accent-dim); }
.list-new .list-check { border-style: dashed; }
.list-choice-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-choice-count { color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.list-new { color: var(--accent); }

/* the feed: a list's first film, frosted while you haven't rated it */
.feed-poster.sealed img { filter: saturate(0.45) brightness(0.75); }

/* ================================================================ discover */
/* films picked for you: upright posters in one row that scrolls sideways */
.poster-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 14px; overflow-x: auto;
  padding-bottom: 10px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.poster-row .poster-card { scroll-snap-align: start; }
.poster-row .seal-stamp { width: 48px; height: 48px; }
.poster-row .card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.95rem; }
/* something that opens later: a strip of frames counting up to it */
.locked { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 0; }
.locked p { margin: 0; }
.locked-strip { margin: 0; }
.locked-strip .frame { width: 22px; height: 16px; }

/* ================================================================ stats */
.stats-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border: 1px solid var(--line); border-radius: 999px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.profile-counts .stats-link:hover { border-color: var(--accent); }
.stats-link .icon { width: 13px; height: 13px; }
.profile-counts { flex-wrap: wrap; align-items: center; }

.stats-head { display: flex; align-items: center; gap: 14px; margin: 10px 0 16px; }
.stats-periods { margin-bottom: 18px; }
.stats-head .face { width: 48px; height: 48px; font-size: 1.2rem; }
.stats-head h1 { margin: 0; font-size: 1.8rem; letter-spacing: -0.02em; }
.stats-eyebrow {
  color: var(--accent); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
}

/* the big numbers, wrapped-style: huge serif figures in a frosty band, the tops under them */
.wrapped {
  margin-bottom: 18px; padding: 28px 28px 22px; border-radius: 20px; border: 1px solid var(--line);
  background:
    radial-gradient(ellipse at 15% 0%, rgba(143, 214, 255, 0.22), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(143, 214, 255, 0.1), transparent 50%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
}
.wrapped-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wrapped-number { display: flex; flex-direction: column; min-width: 0; }
.wrapped-number strong {
  font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.6rem, 8vw, 4.4rem); font-weight: 600; line-height: 1;
  color: var(--frost); letter-spacing: -0.03em; text-shadow: 0 0 30px rgba(143, 214, 255, 0.3); font-variant-numeric: tabular-nums;
}
.wrapped-number span, .wrapped-tops dt {
  margin-top: 6px; color: var(--accent); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.wrapped-tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 16px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.wrapped-tops div { min-width: 0; }
.wrapped-tops dt { margin: 0 0 2px; color: var(--muted); }
.wrapped-tops dd { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; color: var(--frost); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrapped-tops dd a { color: inherit; text-decoration: none; }
.wrapped-tops dd a:hover { color: var(--accent); }

.stats-card { margin-bottom: 18px; padding: 16px 20px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.stats-card .stat-title { margin-bottom: 14px; }
.stats-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.stats-density { height: 90px; }
.stats-density svg { height: 76px; }

/* bars: a name, a track filled to its share of the biggest, the count */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: minmax(80px, 34%) 1fr 2.5em; align-items: center; gap: 12px; font-size: 0.88rem; }
.bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar-track span { display: block; height: 100%; width: calc(var(--p) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); }
.bar:first-child .bar-track span { background: linear-gradient(90deg, var(--accent), var(--frost)); box-shadow: 0 0 10px rgba(143, 214, 255, 0.35); }
.bar-count { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* columns: decades and months, the count on top, the label under */
/* the count sits right on its bar; --bar-h is the tallest bar */
.columns { --bar-h: 120px; display: flex; align-items: flex-end; gap: 6px; }
.column { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.column-count { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1em; }
.column-bar { width: 100%; max-width: 34px; height: calc(var(--p) * var(--bar-h) / 100); min-height: 2px; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, var(--accent), var(--accent-dim)); }
.column-bar.empty { background: var(--line); }
.column-label {
  display: flex; flex-direction: column; align-items: center; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.64rem; color: var(--muted); white-space: nowrap; line-height: 1.3;
}
.column-label small { font-size: 0.6rem; color: var(--accent); }
.activity { gap: 3px; }

/* directors and actors: round faces with their count */
.people-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 10px; }
.person-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; color: var(--text); text-decoration: none; }
.person-chip-face {
  width: 72px; height: 72px; margin-bottom: 6px; border-radius: 50%; object-fit: cover; background: var(--surface-2);
  border: 2px solid var(--line); transition: border-color 0.2s;
}
.person-chip-face.letter { display: grid; place-items: center; font-size: 1.6rem; color: var(--muted); }
.person-chip:hover .person-chip-face { border-color: var(--accent); }
.person-chip-name { font-size: 0.85rem; font-weight: 600; line-height: 1.25; }
.person-chip:hover .person-chip-name { color: var(--accent); }
.person-chip-count { font-size: 0.75rem; color: var(--muted); }
.people-row li:first-child .person-chip-face { border-color: var(--accent); box-shadow: 0 0 14px rgba(143, 214, 255, 0.3); }

@media (max-width: 860px) {
  .stats-pair { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 640px) {
  .list-head { grid-template-columns: 1fr; }
  .list-actions { flex-direction: row; align-items: center; }
  .list-title { font-size: 1.7rem; }
  .list-film { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 8px 12px 8px 8px; }
  .list-films.ranked .list-film { grid-template-columns: 34px 56px minmax(0, 1fr); padding-left: 2px; }
  .list-rank { font-size: 1.5rem; }
  .list-film-title { font-size: 1.05rem; }
  .kind-choices { grid-template-columns: 1fr; }
  .list-item .section-moves { flex-direction: column; }
  .list-item .move { width: 28px; height: 26px; }
  .list-menu { flex-basis: 100%; }
  .wrapped { padding: 20px 18px 16px; }
  .wrapped-numbers { gap: 8px; }
  .wrapped-number span { font-size: 0.6rem; letter-spacing: 0.1em; }
  .wrapped-tops { grid-template-columns: 1fr 1fr; }
  .wrapped-tops dd { font-size: 1.1rem; }
  .bar { grid-template-columns: minmax(70px, 38%) 1fr 2em; gap: 8px; }
  .columns { --bar-h: 96px; gap: 3px; }
  .activity { gap: 2px; }
  /* 24 months (or 31 days) don't fit their names on a phone: only the marked ones (a year's first month,
     a week's first day) keep a label */
  .activity .column-count { display: none; }
  .activity .column:not(.marked) .column-label { visibility: hidden; }
  .people-row { grid-template-columns: repeat(3, 1fr); }
  .person-chip-face { width: 60px; height: 60px; }
  .poster-row { grid-auto-columns: 128px; }
}

/* where to watch (Türkiye), under the poster: small service logos by kind, like a festival's sponsor strip */
.watch { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.watch-title {
  margin: 0 0 10px; font-family: ui-monospace, Menlo, monospace; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--frost);
}
.watch-title .muted { letter-spacing: 0.08em; text-transform: none; font-family: inherit; }
.watch-row { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 8px; margin: 0 0 8px; }
.watch-kind { color: var(--muted); font-size: 0.78rem; }
.watch-services { display: flex; flex-wrap: wrap; gap: 6px; }
.watch-service {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; overflow: hidden;
  background: var(--surface-2); color: var(--frost); font-weight: 700; text-decoration: none;
  box-shadow: 0 0 0 1px var(--line); transition: transform 0.15s, box-shadow 0.15s;
}
.watch-service img { display: block; width: 100%; height: 100%; object-fit: cover; }
.watch-service:hover, .watch-service:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--accent); }
.watch-source { margin: 2px 0 0; font-size: 0.7rem; }
.watch-none { margin: 0; font-size: 0.85rem; }
@media (max-width: 640px) {  /* phones: where to watch goes under the film and your take, not above the title */
  .movie { row-gap: 14px; }
  .movie-side { display: contents; }
  .movie > .watch, .movie-side > .watch { order: 1; }
}

/* imported takes: a small frost-coloured * after the score (title says where it came from) */
.imported-mark { margin-left: 1px; color: var(--accent); font-size: 0.7em; font-weight: 700; cursor: help; vertical-align: super; line-height: 0; }

/* import page */
.import-lede { max-width: 62ch; margin: 0 0 18px; }
.import-form { display: grid; gap: 16px; }
.import-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.import-source { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.import-source h2 { margin: 0 0 4px; font-size: 1rem; color: var(--frost); }
.import-source p { margin: 0; font-size: 0.88rem; }
.import-file { display: grid; gap: 6px; }
.import-file span { font-size: 0.85rem; color: var(--muted); }
.import-file input { width: 100%; max-width: 100%; }
.import-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.import-go .muted { font-size: 0.85rem; }
.import-report { display: grid; gap: 12px; justify-items: start; margin: 0 0 18px; }
.import-report p { margin: 0; }
.import-counts { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.import-count { display: grid; }
.import-count strong { font-family: Georgia, "Times New Roman", serif; font-size: 2rem; line-height: 1.1; color: var(--frost); }
.import-count span { color: var(--muted); font-size: 0.85rem; }
.import-missing summary { cursor: pointer; color: var(--accent); }
.import-missing ul { margin: 8px 0 0; padding-left: 18px; max-height: 260px; overflow: auto; columns: 2 220px; font-size: 0.88rem; }

/* the Club tab: a dot while a Sealed together invite waits for you */
.tool { position: relative; }
.tool-dot {
  position: absolute; top: 3px; right: 5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--bg), 0 0 8px var(--accent);
}
button.small, .button.small { padding: 5px 12px; font-size: 0.82rem; }

/* Sealed together: on the movie page under the buttons, and the Club's list */
.together-status {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  font-size: 0.88rem;
}
.together-status > .icon { width: 20px; height: 20px; color: var(--accent); }
.together-status strong { color: var(--frost); }
.together-status .together-buttons, .together-status .together-takes { grid-column: 1 / -1; }
.together-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.together-buttons form { margin: 0; }
.together-takes { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--muted); }
.together-takes strong { margin-left: 4px; font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; color: var(--frost); }
.together-empty { margin: 0; padding: 8px 10px; font-size: 0.85rem; }
.together-how { max-width: 64ch; }
.together-group { margin: 18px 0 8px; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.together-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.together-row {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px;
  padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.together-row form { margin: 0; }
.together-film { display: block; width: 40px; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.together-film img { display: block; width: 100%; height: 100%; object-fit: cover; }
.together-text { display: grid; gap: 2px; min-width: 0; }
.together-title { color: var(--frost); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.together-title:hover { text-decoration: underline; }
.together-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.85rem; }
.together-who a { color: var(--text); text-decoration: none; }
.together-who .face { width: 20px; height: 20px; font-size: 0.65rem; }
@media (max-width: 640px) {
  .together-row { grid-template-columns: 40px 1fr; }
  .together-row > :last-child { grid-column: 2; }
}

/* the Club's invite form, read as a sentence: "Seal [film] with [someone] [Find]"; then the films found as
   small sealed posters, each with its own Invite button */
.together-find {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(130px, 200px) auto; align-items: center;
  gap: 10px; padding: 0 0 16px; border-bottom: 1px solid var(--line);
}
.together-word { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.15rem; color: var(--frost); }
.together-how { margin: 0 0 14px; }
.together-choices-head { margin: 14px 0 0; font-size: 0.85rem; }
.together-picks {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px 14px;
}
.together-pick { display: grid; gap: 4px; align-content: start; justify-items: start; min-width: 0; }
.together-pick-poster { display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; position: relative; }
.together-pick-poster .card-poster { width: 100%; height: 100%; }
/* not inside a .card, so the poster sizing (and the sealed tint) is spelled out here: the whole poster fits */
.together-pick-poster img, .together-pick-poster .no-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.together-pick-poster .card-poster img { filter: saturate(0.45) brightness(0.8); transition: filter 0.4s; }
.together-pick:hover .together-pick-poster .card-poster img { filter: saturate(0.8) brightness(0.92); }
.together-pick:hover .seal::before { opacity: 0; }
.together-pick-title {
  max-width: 100%; margin-top: 4px; color: var(--frost); font-weight: 600; font-size: 0.9rem; line-height: 1.25; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.together-pick-title:hover { text-decoration: underline; }
.together-pick-year { font-size: 0.8rem; line-height: 1.3; height: 1.3em; }
/* every pick the same height: the title always takes two lines, so the Invite buttons line up */
.together-pick-title { min-height: calc(2 * 1.25em); }
.together-pick .seal-stamp { width: 44px; height: 44px; }
.together-pick form { margin: 4px 0 0; }
@media (max-width: 640px) {
  .together-find { grid-template-columns: auto minmax(0, 1fr); }
  .together-find button { grid-column: 1 / -1; }
  .together-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
}
/* with club.js the films come as you type: no Find button, and the row fades while new ones load */
.together-find.live { grid-template-columns: auto minmax(0, 1fr) auto minmax(130px, 200px); }
.together-find.live .together-go { display: none; }
.together-results { transition: opacity 0.2s; }
.together-results.loading { opacity: 0.5; }
@media (max-width: 640px) {
  .together-find.live { grid-template-columns: auto minmax(0, 1fr); }
}
.together-pick:hover .seal-stamp { transform: rotate(0) scale(1.05); }
.together-pick:hover .seal-stamp::before { opacity: 0; }
.together-pick:hover .seal-stamp::after { opacity: 1; }

/* the Ratings page's sort and filters: one quiet row of small selects */
.rating-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 4px 0 6px; }
.rating-tools label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); }
.rating-tools select { width: auto; padding: 6px 30px 6px 10px; font-size: 0.9rem; }
.rating-tools.live .rating-tools-apply { display: none; }
.rating-tools-reset { font-size: 0.85rem; }
.rating-tools-sort { display: inline-flex; align-items: center; gap: 6px; }
.rating-tools-dir { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; }
.rating-tools-dir .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rating-tools-note { font-size: 0.85rem; margin: 0 0 18px; }

/* Nudge (Sealed together, like MSN's): the button, and the card on the other side's next page, which shakes once */
.nudge-button { display: inline-flex; align-items: center; gap: 6px; }
.nudge-button .icon { width: 16px; height: 16px; }
.nudge-button:not(.nudged) { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.nudge-button.nudged { cursor: default; opacity: 0.6; }
.nudge-button.nudged:hover { color: var(--muted); border-color: var(--line); }
.nudge-button:not(.nudged):hover .icon { animation: nudge-buzz 0.4s; }
.together-nudged { color: var(--accent); }
.nudge {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 12px;
  margin: 0 0 18px; padding: 10px 10px 10px 10px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: var(--radius); background: linear-gradient(100deg, var(--accent-dim), var(--surface) 55%);
  box-shadow: 0 0 0 0 rgba(143, 214, 255, 0.5); animation: nudge-glow 1.6s 0.1s ease-out;
  transition: opacity 0.25s, transform 0.25s;
}
.nudge.gone { opacity: 0; transform: translateY(-6px); }
.nudge-poster { display: block; width: 40px; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.nudge-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nudge-text { display: grid; gap: 2px; min-width: 0; }
.nudge-head { color: var(--text); }  /* plain text, so it wraps like a sentence on narrow phones */
.nudge-head .face { display: inline-grid; width: 20px; height: 20px; margin-right: 2px; font-size: 0.65rem; vertical-align: -5px; }
.nudge-head strong { color: var(--frost); }
.nudge-line { color: var(--muted); font-size: 0.88rem; }
.nudge-line a { color: var(--frost); font-weight: 600; text-decoration: none; }
.nudge-line a:hover { text-decoration: underline; }
.nudge-go { white-space: nowrap; }
.nudge-more { margin: -8px 0 18px; font-size: 0.88rem; }
.nudge-more a { color: var(--accent); text-decoration: none; }
.nudge-more a:hover { text-decoration: underline; }
.nudge-close {
  width: 30px; height: 30px; padding: 0; border-radius: 8px; background: transparent; color: var(--muted);
  font-size: 1.3rem; line-height: 1;
}
.nudge-close:hover { filter: none; color: var(--frost); background: var(--accent-dim); }
@media (max-width: 640px) {
  .nudge { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .nudge-poster { grid-row: span 2; align-self: start; }
  .nudge-go { grid-column: 2; justify-self: start; }
  .nudge-close { grid-column: 3; grid-row: 1; align-self: start; }
}
/* the shake: the whole page, once, the way MSN shook the chat window */
body.nudged { overflow-x: clip; }  /* no scrollbar while the page swings past the edge */
body.nudged > main { animation: nudge-shake 0.7s 0.15s backwards; }  /* backwards: no transform left behind */
@keyframes nudge-shake {
  0%, 100% { transform: none; }
  10% { transform: translate(-9px, 2px); }
  20% { transform: translate(8px, -2px); }
  30% { transform: translate(-7px, 1px); }
  40% { transform: translate(6px, -1px); }
  55% { transform: translate(-4px, 1px); }
  70% { transform: translate(3px, 0); }
  85% { transform: translate(-1px, 0); }
}
@keyframes nudge-glow { from { box-shadow: 0 0 0 0 rgba(143, 214, 255, 0.55); } to { box-shadow: 0 0 0 14px rgba(143, 214, 255, 0); } }
@keyframes nudge-buzz { 25% { transform: translateX(-2px); } 50% { transform: translateX(2px); } 75% { transform: translateX(-1px); } }
@media (prefers-reduced-motion: reduce) {
  body.nudged > main, .nudge, .nudge-button .icon { animation: none !important; }
}

/* clubs of your own: the Club tab's rows, the create / settings form, and a club's page */
.club-icon { display: block; width: 40px; height: 40px; border-radius: 50%; }
.club-row { grid-template-columns: 40px 1fr auto; }
.club-row-icon { display: block; }
.club-empty { margin: 0 0 28px; max-width: 64ch; }
.club-rated { font-size: 0.8rem; color: var(--accent); white-space: nowrap; }
.club-form-lead { margin: -4px 0 18px; max-width: 64ch; }
.club-form input[name="name"] { width: 100%; margin-top: 6px; }
.club-options { display: grid; gap: 8px; margin-top: 6px; }
.club-option {
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.club-option input { margin: 0; accent-color: var(--accent); }
.club-option .muted { grid-column: 2; font-size: 0.85rem; }
.club-option:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); }
.club-lengths { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.club-length {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  white-space: nowrap;
}
.club-length input { margin: 0; accent-color: var(--accent); }
.club-length:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); color: var(--frost); }
.club-form-end { display: flex; justify-content: flex-end; }
.club-delete { max-width: 640px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }

.club-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin: 6px 0 24px; }
.club-icon-big { width: 72px; height: 72px; }
.club-name { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 2rem; color: var(--frost); }
.club-meta { margin: 4px 0 0; font-size: 0.9rem; }
.club-head-actions { display: flex; gap: 6px; }
.club-head-actions form { margin: 0; }
.club-join { margin-bottom: 28px; display: grid; gap: 10px; justify-items: start; }
.club-join p { margin: 0; }
.club-find { grid-template-columns: auto minmax(0, 1fr) auto; max-width: 560px; }
.club-film { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start; max-width: 720px; }
.club-film-poster { display: block; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; position: relative; }
.club-film-poster .card-poster { width: 100%; height: 100%; }
.club-film-poster img, .club-film-poster .no-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.club-film-text { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.club-film-title { font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; color: var(--frost); text-decoration: none; line-height: 1.2; }
.club-film-title:hover { text-decoration: underline; }
.club-film-status, .club-mine, .club-average { margin: 0; }
.club-film-status strong, .club-average strong { color: var(--frost); }
.club-average strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; margin-left: 4px; }
.club-takes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-width: 220px; }
.club-take { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; }
.club-take .face { width: 24px; height: 24px; font-size: 0.7rem; }
.club-take a { color: var(--text); text-decoration: none; }
.club-take strong { font-family: Georgia, "Times New Roman", serif; color: var(--frost); }
.club-take.you a { color: var(--accent); }
.club-member-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 720px; }
.club-member {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.club-member.invited { opacity: 0.75; border-style: dashed; }
.club-member-name { color: var(--text); text-decoration: none; font-weight: 600; }
.club-role {
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
}
.club-member-tools { margin-left: auto; }
.club-member-tools form, form.club-member-tools { margin: 0; }
form.club-member-tools { margin-left: auto; }
.club-invite { display: grid; gap: 12px; margin-top: 14px; max-width: 720px; }
.club-invite-form { display: flex; gap: 8px; align-items: center; }
.club-invite-form select { max-width: 240px; }
.club-link { display: grid; gap: 4px; font-size: 0.85rem; }
.club-link input { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.82rem; }
@media (max-width: 640px) {
  .club-head { grid-template-columns: auto 1fr; }
  .club-head-actions { grid-column: 1 / -1; }
  .club-icon-big { width: 56px; height: 56px; }
  .club-name { font-size: 1.5rem; }
  .club-film { grid-template-columns: 90px 1fr; gap: 12px; }
  .club-film-title { font-size: 1.2rem; }
  .club-row { grid-template-columns: 40px 1fr; }
  .club-row > :last-child { justify-self: start; }
}

/* a club's past rounds (rows that open to everyone's take) and its stats cards */
.club-past { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 720px; }
.club-past-row { display: block; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.club-past-row > summary, .club-past-plain {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 12px 8px 8px; cursor: pointer; list-style: none; color: inherit; text-decoration: none;
}
.club-past-row > summary::-webkit-details-marker { display: none; }
.club-past-row[open] > summary { border-bottom: 1px solid var(--line); }
.club-past-row:hover { border-color: var(--accent-dim); }
.club-past-film { display: block; width: 36px; aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.club-past-film img { display: block; width: 100%; height: 100%; object-fit: cover; }
.club-past-film.sealed img { filter: saturate(0.3) brightness(0.6); }
.club-past-text { display: grid; gap: 1px; min-width: 0; }
.club-past-title { color: var(--frost); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.club-past-who { font-size: 0.82rem; }
.club-past-numbers { display: flex; align-items: baseline; gap: 14px; white-space: nowrap; }
.club-past-numbers strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; color: var(--frost); margin-left: 2px; }
.club-past-numbers .club-you { color: var(--accent); }
.club-range { font-size: 0.82rem; }
.club-past-body { display: grid; gap: 10px; justify-items: start; padding: 12px 14px 14px 56px; }
.club-past-link { font-size: 0.85rem; text-decoration: none; }
.club-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; max-width: 920px; }
.club-stat {
  display: grid; gap: 4px; align-content: start; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.club-stat-film { font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; color: var(--frost); text-decoration: none; }
.club-stat-film:hover { text-decoration: underline; }
.club-stat-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }
.club-stat-who a { color: var(--frost); text-decoration: none; }
.club-stat-who .face { width: 24px; height: 24px; font-size: 0.7rem; }
.club-stat-note { font-size: 0.82rem; color: var(--muted); }
@media (max-width: 640px) {
  .club-past-row > summary, .club-past-plain { grid-template-columns: 36px minmax(0, 1fr); }
  .club-past-numbers { grid-column: 2; }
  .club-past-body { padding-left: 14px; }
}

/* club chat and a round's discussion */
.club-talk { display: grid; gap: 10px; max-width: 720px; margin-top: 18px; }
.club-past-body .club-talk { margin-top: 4px; width: 100%; }
.club-chat .club-talk { margin-top: 0; }
.club-messages { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.club-message { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.club-message .face { width: 28px; height: 28px; font-size: 0.75rem; }
.club-message-body { min-width: 0; }
.club-message-head { display: flex; gap: 8px; align-items: baseline; font-size: 0.85rem; }
.club-message-head a { color: var(--frost); font-weight: 600; text-decoration: none; }
.club-message.mine .club-message-head a { color: var(--accent); }
.club-message-body p { margin: 2px 0 0; overflow-wrap: anywhere; }
.club-message form { margin: 0; }
.club-message-x {
  background: none; border: 0; padding: 0 6px; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity 0.15s;
}
.club-message:hover .club-message-x, .club-message-x:focus-visible { opacity: 1; }
@media (hover: none) { .club-message-x { opacity: 0.6; } }
.club-talk-sealed { margin: 0; font-size: 0.88rem; }
.club-write { display: flex; gap: 8px; }
.club-write input { flex: 1; min-width: 0; }

/* members vote: the films put up for the coming round */
.club-proposals { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; max-width: 720px; }
.club-proposal {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px;
  padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.club-proposal.voted { border-color: var(--accent); background: var(--accent-dim); }
.club-proposal form { margin: 0; }
.club-votes { white-space: nowrap; color: var(--muted); font-size: 0.9rem; }
.club-votes strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; color: var(--frost); }
.club-propose { max-width: 720px; }
.club-propose > summary { list-style: none; display: inline-block; margin-bottom: 12px; }
.club-propose > summary::-webkit-details-marker { display: none; }
@media (max-width: 640px) {
  .club-proposal { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .club-proposal > form, .club-proposal > .club-rated { grid-column: 2 / -1; justify-self: start; }
}
a.club-past-title { text-decoration: none; }
a.club-past-title:hover { text-decoration: underline; }
.club-member-tools + .club-member-tools { margin-left: 0; }
.club-calling { display: inline-block; width: 7px; height: 7px; margin-left: 7px; vertical-align: middle; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* club stats: takes as faces on a 1-10 line, round columns (frosted when sealed), bars with faces */
.stats-head .club-icon-big { width: 56px; height: 56px; }
.club-stat-film { font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; color: var(--frost); text-decoration: none; }
.club-stat-film:hover { text-decoration: underline; }
.club-line-card .club-stat-note { margin: 2px 0 0; }
.take-line { position: relative; height: 76px; margin: 14px 14px 0; }
.take-line-track { position: absolute; left: 0; right: 0; bottom: 14px; height: 2px; border-radius: 2px; background: var(--line); }
.take-line-span {
  position: absolute; bottom: 12px; height: 6px; border-radius: 999px;
  left: calc(var(--a) * 1%); width: calc((var(--b) - var(--a)) * 1%); min-width: 6px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent)); box-shadow: 0 0 12px rgba(143, 214, 255, 0.3);
}
.take-dot {
  position: absolute; left: calc(var(--x) * 1%); bottom: 28px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.take-dot .face { width: 26px; height: 26px; font-size: 0.7rem; box-shadow: 0 0 0 2px var(--surface); }
.take-dot-score { font-size: 0.68rem; color: var(--frost); font-variant-numeric: tabular-nums; line-height: 1; }
.take-tick { position: absolute; left: calc(var(--x) * 1%); bottom: 9px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--frost); }
.take-line.sealed { height: 40px; }
.take-line.sealed .take-line-track { height: 6px; background: repeating-linear-gradient(90deg, var(--surface-2) 0 8px, var(--line) 8px 10px); }
.club-line-card + .club-line-card { min-width: 0; }
.club-rounds-chart .column { text-decoration: none; }
.club-rounds-chart .column:hover .column-bar { filter: brightness(1.2); }
.club-rounds-chart .column.sealed .column-bar {
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--line) 6px 8px); opacity: 0.8;
}
.club-rounds-chart .column.sealed .column-count { color: var(--line); }
.club-bars .bar { grid-template-columns: minmax(110px, 38%) 1fr 3em; }
.club-bars .bar-name { display: flex; align-items: center; gap: 6px; }
.club-bars .bar-name .face { width: 22px; height: 22px; font-size: 0.62rem; flex: none; }
.club-bars .bar-name > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.club-pairs .bar-name .face + .face { margin-left: -12px; box-shadow: 0 0 0 2px var(--surface); }
.club-bars .bar.lead .bar-count { color: var(--frost); font-weight: 600; }
@media (max-width: 640px) {
  .take-line { margin: 8px 10px 0; }
  .club-bars .bar { grid-template-columns: minmax(90px, 42%) 1fr 2.8em; }
}
.club-private { display: flex; gap: 20px; align-items: flex-start; max-width: 620px; margin-top: 18px; }
.club-private h1 { margin: 0 0 6px; font-family: Georgia, "Times New Roman", serif; color: var(--frost); }
.club-private p { margin: 0 0 14px; }
@media (max-width: 640px) { .club-private { flex-direction: column; } }