/* A mobile film journal at every window size. */
:root {
  --header-height: 32px;
  --stage-ink: #171d1b;
  --stage-text: #faf8f0;
  --stage-muted: #d1d6c9;
  --recognition-scene: clamp(128px, calc(100svh - 592px), 248px);
  --learning-scene: clamp(96px, calc(100svh - 600px), 220px);
  --question-height: calc(100svh - var(--header-height) - var(--nav-height) - 16px);
}
.journal-shell {
  max-width: 520px;
  min-height: 100svh;
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  padding-left: max(20px, env(safe-area-inset-left, 0px));
}
.journal-header { height: var(--header-height); }
.journal-header > .round-progress { width: 100%; margin: 0; }
.wordmark { font-size: 31px; }
.app-main, .app-main:has(.rank-view:not([hidden])) {
  max-width: none;
  padding-bottom: calc(var(--nav-height) + 12px);
}
.app-view { padding-top: 20px; }
.rank-view, .learn-view { padding-top: 0; }
.bottom-nav {
  left: 50%;
  right: auto;
  width: min(100%, 520px);
  transform: translateX(-50%);
}
.bottom-nav-inner { max-width: none; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-right: 8px; padding-left: 8px; }
.nav-button { gap: 3px; }
.nav-button span { white-space: nowrap; }
.notice { max-width: none; }
.flow-toolbar[hidden] { display: none; }
.rank-modes { gap: 2px; }
.rank-modes > button { min-width: 62px; padding-right: 14px; padding-left: 14px; }
.count-label { white-space: nowrap; font-size: 12px; }

/* A question has fixed slots; changing film data cannot move its controls. */
.exercise-item[data-type] {
  height: var(--question-height);
  min-height: calc(var(--recognition-scene) + 444px);
  padding: 6px 0 2px;
  touch-action: none;
}
.exercise-item[data-type] .film-scene { touch-action: none; }
.exercise-item.is-saving button:disabled { opacity: 1; }
.exercise-item[data-type] .exercise-heading {
  flex: none;
  width: 100%;
  max-width: none;
  height: 96px;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  margin: 0 0 12px;
}
.exercise-title { font-size: 26px; line-height: 31px; text-wrap: pretty; }
.exercise-item[data-type] .exercise-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; width: 100%; }
.film-question-title { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; }
.exercise-grid { gap: 12px; max-width: none; }
.exercise-grid.single-film { max-width: none; }
.single-film .exercise-film.recognition-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}
.recognition-card > .film-scene { height: var(--recognition-scene); flex: none; }
.film-ratings { display: flex; flex: none; align-items: center; gap: 12px; height: 32px; min-height: 32px; }
.rating-chip { display: inline-flex; align-items: center; gap: 4px; height: 44px; min-height: 44px; color: var(--muted); font-size: 12px; line-height: 1.2; text-decoration-color: var(--line); white-space: nowrap; }
.rating-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.movie-ratings { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; height: auto; min-height: 70px; }
.movie-ratings[data-ratings-loaded="true"]:empty { display: none; }
.movie-ratings .rating-chip { height: auto; min-height: 70px; padding: 10px 8px; flex-direction: column; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; text-align: center; text-decoration: none; white-space: normal; }
.movie-ratings .rating-provider { font-size: 11px; line-height: 14px; }
.movie-ratings .rating-value { color: var(--ink); font-size: 18px; }
.recognition-card > .exercise-card-actions,
.recognition-card > .exercise-feelings {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(4, 52px);
  gap: 8px;
  height: 232px;
  min-height: 232px;
  margin: 12px 0 0;
  padding: 0;
}
.recognition-card > .exercise-card-actions > button,
.recognition-card > .exercise-feelings > button {
  height: 52px;
  min-height: 52px;
  margin: 0;
  padding: 13px 18px;
  font-size: 15px;
  white-space: nowrap;
}
.recognition-card > .exercise-card-actions > .quiet-button {
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
}
.recognition-card > .exercise-feelings.heat-feelings { position: relative; grid-template-rows: repeat(4, 52px); gap: 8px; padding-left: 48px; --heat: 0; --heat-color: #748666; }
.recognition-card > .exercise-feelings.heat-feelings > button { height: 52px; min-height: 52px; padding: 13px 18px; }
.feeling-meter { position: absolute; left: 0; top: 0; bottom: 0; width: 32px; border-radius: 18px; background: #e1e2d8; isolation: isolate; }
.feeling-meter-fill { position: absolute; inset: auto 0 0; height: calc(16px + (100% - 32px) * var(--heat)); border-radius: 0 0 18px 18px; background: var(--heat-color); transition: height 460ms cubic-bezier(.22,1,.36,1), background 460ms ease; }
.feeling-meter-thumb { position: absolute; left: 0; bottom: calc(16px + (100% - 32px) * var(--heat)); width: 32px; height: 32px; transform: translateY(50%); border-radius: 50%; background: #fffefa; box-shadow: 0 1px 3px rgb(35 42 28 / 15%); display: grid; place-items: center; transition: bottom 460ms cubic-bezier(.22,1,.36,1); }
.feeling-meter-thumb svg { width: 17px; height: 17px; fill: #b85528; opacity: 0; transition: opacity 460ms ease; }
.recognition-card > .heat-feelings[data-heat="love"] { --heat-color: #d68a48; }
.heat-feelings[data-heat="love"] .feeling-meter-thumb svg { opacity: 1; }
.heat-feelings.is-adjusting .feeling-meter-fill, .heat-feelings.is-adjusting .feeling-meter-thumb { transition: none; }
.feeling-slider { position: absolute; inset: 0 -6px; margin: 0; padding: 0; border: 0; width: 44px; height: 100%; writing-mode: vertical-lr; direction: rtl; appearance: none; opacity: 0; cursor: ns-resize; touch-action: none; }
.feeling-slider::-webkit-slider-thumb { appearance: none; width: 32px; height: 32px; }
.feeling-slider::-moz-range-thumb { width: 32px; height: 32px; border: 0; }
.feeling-meter:has(.feeling-slider:focus-visible) { outline: 2px solid var(--olive); outline-offset: 4px; }
.heat-feelings[data-heat="love"] [data-feeling="love"], .heat-feelings[data-heat="like"] [data-feeling="like"], .heat-feelings[data-heat="okay"] [data-feeling="okay"], .heat-feelings[data-heat="dislike"] [data-feeling="dislike"] { background: var(--wash); border-color: #a5b293; }
@media (prefers-reduced-motion: reduce) { .feeling-meter-fill, .feeling-meter-thumb, .feeling-meter-thumb svg, .comparison-tile { transition: none; } }

/* Solid ink is the honest fallback; the scrim exists to keep real art legible. */
.film-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  background: var(--stage-ink);
  color: var(--stage-text);
  border-radius: 16px;
}
.film-scene::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgb(10 15 12 / 5%) 18%, rgb(10 15 12 / 28%) 43%, rgb(10 15 12 / 87%) 100%);
}
.film-scene.has-artwork::before { opacity: 1; }
.film-scene > .film-artwork {
  position: absolute;
  z-index: 0;
  inset: 0;
  float: none;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  transition: opacity 180ms ease-out;
}
.film-scene > .film-artwork.is-loaded { opacity: 1; }
.film-scene > .film-artwork img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}
.recognition-card > .film-scene[data-artwork-kind="poster"] > .film-artwork img,
.movie-hero[data-artwork-kind="poster"] > .film-artwork img { object-fit: contain; }
.comparison-choice > .film-artwork img { object-position: center top; }
@keyframes artwork-arrive { from { opacity: 0; } to { opacity: 1; } }
.film-scene .scene-copy {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  padding: 22px;
  text-align: left;
  pointer-events: none;
}
.exercise-film .scene-copy .film-title,
.film-scene .scene-copy .film-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 29px;
  font-weight: 400;
  line-height: 1.13;
  letter-spacing: -.025em;
  color: var(--stage-text);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.film-scene .movie-year {
  display: block;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--stage-muted);
}
.film-scene .film-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 7px;
  color: var(--stage-muted);
  font-size: 12px;
}
.icon-button, .film-info-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
}
.icon-button svg, .film-info-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.film-info-button {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  border-color: rgb(250 248 240 / 30%);
  color: var(--stage-text);
  background: rgb(16 22 18 / 72%);
}
.film-info-button:focus-visible { outline-color: var(--stage-text); outline-offset: 3px; }
.film-info-button:active { background: var(--olive-deep); }
.icon-button:active:not(:disabled) { background: #e2e7d6; }

/* Equal comparison stages are also the preference targets. */
.exercise-item[data-type="compare"] > .exercise-grid {
  flex: 1;
  align-items: center;
}
.comparison-tile { position: relative; min-width: 0; transition: transform 220ms cubic-bezier(.16,1,.3,1), opacity 220ms ease-out; }
.is-dragging-pair .comparison-tile { transition: none; will-change: transform, opacity; }
.gesture-left .comparison-tile:first-child, .gesture-right .comparison-tile:last-child { z-index: 3; }
.comparison-tile .comparison-choice.film-scene,
.comparison-tile .comparison-choice.film-scene:has(> .film-artwork) {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--stage-ink);
  color: var(--stage-text);
  touch-action: none;
}
.comparison-tile .comparison-choice.film-scene::before {
  position: static;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: none;
  opacity: 1;
}
.comparison-tile .comparison-choice > .film-artwork { bottom: auto; height: auto; aspect-ratio: 2 / 3; }
.comparison-tile .comparison-choice > .film-artwork img { object-fit: contain; object-position: center top; }
.comparison-tile .comparison-choice .scene-copy {
  position: relative;
  inset: auto;
  height: 124px;
  min-height: 124px;
  padding: 14px 13px;
  background: var(--stage-ink);
}
.comparison-tile .comparison-choice .scene-copy .film-title { font-size: 21px; line-height: 24px; }
.comparison-tile .comparison-choice .scene-copy > .movie-year { margin-top: 7px; line-height: 17px; }
.comparison-tile .film-info-button { top: 8px; right: 8px; }
.comparison-tile .comparison-action { display: none; }
.comparison-choice.film-scene::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border: 2px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 150ms ease;
}
.gesture-left .comparison-tile:first-child .comparison-choice::after,
.gesture-right .comparison-tile:last-child .comparison-choice::after,
.comparison-tile .comparison-choice.is-chosen::after { border-color: #bdcf9b; }
.exercise-item .comparison-choice.film-scene.is-chosen,
.exercise-item .comparison-choice.film-scene.is-chosen:disabled { opacity: 1; background: var(--stage-ink); }

/* Dragging moves the row, never its siblings' geometry. */
.exercise-item[data-type="order"] .order-exercise { display: flex; flex-direction: column; justify-content: center; flex: 1; }
.exercise-order { width: 100%; max-width: none; }
.order-hint { margin: 0 0 12px; font-size: 12px; }
.order-film {
  position: relative;
  grid-template-columns: 18px minmax(0, 1fr) 32px;
  grid-template-areas: "position film grip";
  gap: 10px;
  height: 96px;
  min-height: 96px;
  max-height: 96px;
  padding: 3px 10px;
  margin-bottom: 10px;
  border-color: var(--line);
  border-radius: 12px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform 180ms cubic-bezier(.2, .8, .2, 1), background 150ms ease, box-shadow 150ms ease;
}
.order-film:last-child { margin-bottom: 0; }
.order-position { font-size: 12px; }
#exercise-feed .order-film > .order-grip { grid-area: grip; display: flex; align-items: center; justify-content: center; width: 32px; height: 44px; color: var(--muted); pointer-events: none; }
.order-grip svg { width: 18px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.order-film:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
.order-film.is-dragging { cursor: grabbing; }
.order-film-info { position: relative; display: flex; align-items: center; min-height: 64px; padding-left: 48px; }
.order-film-info::before { content: ""; position: absolute; left: 0; top: 2px; width: 40px; height: 60px; background: var(--stage-ink); border-radius: 4px; }
.order-film-info > .film-artwork { position: absolute; left: 0; top: 2px; width: 40px; height: 60px; margin: 0; }
.order-film-info > .film-artwork img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; animation: artwork-arrive 180ms ease-out; }
.order-film .film-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 18px;
  line-height: 1.2;
}
.order-film .movie-year { margin-top: 4px; font-size: 12px; line-height: 1.25; }
.order-title-button { width: 100%; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; text-align: left; }
.trivia-feedback-empty { visibility: hidden; }
.order-film.is-dragging { z-index: 5; scale: 1; background: var(--paper); border-color: transparent; box-shadow: 0 9px 24px -8px rgb(25 34 22 / 28%); transition: none; will-change: transform; }
.exercise-footer {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 12px;
  min-height: 52px;
  margin-top: auto;
  padding: 6px 0 0;
}
.exercise-footer .secondary-button { min-width: 100px; min-height: 44px; padding: 10px 16px; white-space: nowrap; }
.exercise-footer .order-save {
  min-width: 140px;
  min-height: 44px;
  padding: 10px 18px;
  border-color: var(--line);
  background: var(--wash);
  color: var(--muted);
  white-space: nowrap;
}
.exercise-footer .order-save.is-ready { background: var(--olive); border-color: var(--olive); color: var(--paper); }

/* The shared narrow shell also keeps lists and Learn comfortable on desktop. */
.film-row-top { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; }
.film-actions, .match-reason { padding-left: 32px; }
.film-inline-classifier, .movie-link { margin-left: 32px; }
.film-info, .film-info:has(> .film-artwork) {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  column-gap: 12px;
  min-width: 0;
  min-height: 72px;
}
.film-info > .film-artwork { grid-column: 1; grid-row: 1 / 3; float: none; width: 48px; height: 72px; margin: 0; background: var(--stage-ink); border-radius: 5px; overflow: hidden; }
.film-info > .film-title-link { grid-column: 2; grid-row: 1; display: block; min-width: 0; text-decoration: none; }
.film-info > .film-title-link:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; border-radius: 2px; }
.film-info > .film-meta { grid-column: 2; grid-row: 2; margin: 7px 0 0; font-size: 12px; line-height: 1.6; }
.film-row .film-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 22px; line-height: 1.18; overflow-wrap: normal; }
.film-row .film-score { min-width: 38px; }
.film-row .score-value { font-size: 22px; }
.film-row .film-actions { margin-top: 12px; }
.film-actions .quiet-button { min-height: 44px; }
.film-row .movie-year { display: block; margin: 6px 0 0; }
.film-info > .film-artwork img { width: 100%; height: 100%; object-fit: cover; }
.selected-film > .film-artwork { width: 64px; height: 96px; }
.selected-film > .film-artwork img { width: 100%; height: 100%; object-fit: cover; }
.priority-controls { flex-direction: column; }
.wishlist-toolbar { gap: 4px 16px; }
.wishlist-toolbar > p { flex: 1; }
.wishlist-toolbar > button { min-height: 44px; font-size: 13px; white-space: nowrap; }
.watchlist-reorderable { position: relative; touch-action: pan-y; }
#wishlist-list > .film-row { padding-top: 18px; padding-bottom: 18px; }
.watchlist-grip { display: none; width: 28px; height: 44px; align-items: center; justify-content: center; color: var(--muted); }
.watchlist-grip svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; }
#wishlist-list.is-reordering .watchlist-reorderable { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
#wishlist-list.is-reordering .watchlist-grip { display: flex; }
#wishlist-list.is-reordering .film-title-link { cursor: grab; }
#wishlist-list.is-reordering .film-actions { display: none; }
#wishlist-list.is-reordering .watchlist-reorderable:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; border-radius: 10px; }
#wishlist-list.is-reordering .watchlist-reorderable.is-dragging { z-index: 5; cursor: grabbing; background: var(--paper); box-shadow: 0 12px 28px -12px rgb(25 34 22 / 28%); border-radius: 10px; border-color: transparent; }
.data-actions .profile-name-label { display: grid; flex: 0 0 100%; grid-column: 1 / -1; gap: 6px; width: 100%; color: var(--muted); font-size: 12px; line-height: 1.5; }
.data-actions .profile-name { width: 100%; min-width: 0; height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; }

/* Explore is a poster shelf; every card keeps its place while art loads. */
.film-list.discovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; padding: 0; list-style: none; }
.discovery-film { position: relative; min-width: 0; }
.discovery-open { display: block; width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; }
.discovery-art.film-scene { width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 12px; }
.discovery-art.film-scene::before { display: none; }
.discovery-art > .film-artwork img { object-fit: contain; object-position: center top; }
.discovery-art .scene-copy { padding: 16px 13px; }
.discovery-art .scene-copy .film-title { font-size: 21px; line-height: 1.2; }
.discovery-art.has-artwork .scene-copy { opacity: 0; }
.discovery-open > .film-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 48px; margin: 12px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 400; line-height: 24px; letter-spacing: -.015em; }
.discovery-open > .film-meta { overflow: hidden; margin: 6px 0 0; min-height: 20px; font-size: 13px; line-height: 20px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.discovery-save.icon-button { position: absolute; z-index: 4; top: 8px; right: 8px; color: var(--stage-text); border-color: rgb(250 248 240 / 30%); background: rgb(16 22 18 / 82%); }
.discovery-save.icon-button[aria-pressed="true"] { color: var(--paper); background: var(--olive-deep); border-color: #b0c28d; }
.discovery-save.icon-button:focus-visible { outline-color: var(--stage-text); outline-offset: 3px; }
.discovery-grid .match-reason { overflow: hidden; margin: 4px 0 0; padding: 0; color: var(--muted); font-size: 11px; line-height: 17px; white-space: nowrap; text-overflow: ellipsis; }
/* Learn keeps the same question, art, options, and feedback slots throughout. */
.exercise-item.trivia-question[data-type="learn"] { min-height: calc(var(--learning-scene) + 452px); }
.trivia-question .trivia-film.film-scene,
.trivia-question .trivia-film.film-scene:has(> .film-artwork) { display: block; flex: none; width: 100%; max-width: none; height: var(--learning-scene); min-height: var(--learning-scene); margin: 0 0 12px; }
.trivia-film.film-scene::before { display: none; }
.trivia-film.film-scene > .film-artwork { inset: 0; width: 100%; height: 100%; }
.trivia-film.film-scene[data-artwork-kind="poster"] > .film-artwork img { object-fit: contain; }
.trivia-question .trivia-options { flex: none; grid-template-rows: repeat(4, 52px); height: 232px; min-height: 232px; max-width: none; touch-action: none; }
.trivia-question .trivia-option { height: 52px; min-height: 52px; margin: 0; padding: 6px 16px; line-height: 18px; }
.trivia-question .trivia-answer-footer { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; width: 100%; height: 92px; min-height: 92px; margin-top: auto; padding: 0; }
.trivia-answer-footer .trivia-feedback { width: 100%; max-width: none; height: 88px; min-height: 88px; margin: 0; padding-top: 4px; font-size: 14px; line-height: 20px; }
.trivia-feedback > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.trivia-answer-footer .trivia-source { max-width: 100%; min-height: 44px; font-size: 12px; line-height: 1.3; }

/* A film opens as a full page in the same journal. */
.movie-view { padding-top: 0; }
.movie-topbar { display: flex; align-items: center; gap: 12px; min-height: 56px; margin-bottom: 8px; }
.movie-topbar .icon-button { border: 0; margin-left: -10px; }
.movie-topbar .movie-back { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 4px; color: var(--olive); font-size: 14px; }
.movie-topbar > span, .movie-topbar > p { color: var(--muted); font-size: 14px; }
.movie-hero.film-scene { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 16px; }
.movie-hero .scene-copy { padding: 24px; }
.movie-hero .scene-copy .film-title { font-size: 32px; }
.movie-trailer { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid rgb(250 248 240 / 40%); border-radius: 10px; background: rgb(16 22 18 / 88%); color: var(--stage-text); font-size: 13px; text-decoration: none; }
.movie-trailer svg { width: 18px; height: 18px; fill: currentColor; }
.movie-gallery { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: #a0ab8b var(--paper); }
.movie-still { display: block; flex: 0 0 88%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: var(--stage-ink); scroll-snap-align: start; }
.movie-still img { display: block; width: 100%; height: 100%; object-fit: cover; }
.movie-heading { margin: 24px 0 20px; }
.movie-heading h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 34px; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; overflow-wrap: anywhere; }
.movie-heading .movie-year { display: inline; margin: 0; }
.movie-heading .film-meta, .movie-heading > p { color: var(--muted); font-size: 14px; line-height: 1.65; margin-top: 12px; }
.movie-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 20px 0 28px; }
.movie-actions > button { width: 100%; min-width: 0; min-height: 48px; padding: 12px 10px; font-size: 14px; white-space: nowrap; }
.movie-actions > button:last-child:nth-child(odd), .movie-actions > .classifier { grid-column: 1 / -1; }
.movie-actions > .movie-status-actions, .movie-actions > .feeling-controls, .movie-actions > .quiet-button { grid-column: 1 / -1; }
.movie-status-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.movie-status-actions > button { width: 100%; min-width: 0; min-height: 52px; padding: 12px 10px; font-size: 14px; white-space: nowrap; }
.movie-status-actions > button[aria-pressed="true"] { color: var(--olive-deep); background: #e4e9d9; border-color: #9da98a; }
.movie-actions > .feeling-controls { max-width: none; }
.movie-actions .quiet-button { text-align: center; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; }
.movie-personal-summary { margin: 20px 0 24px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.movie-personal-summary dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; }
.movie-personal-summary dt { color: var(--muted); font-size: 12px; line-height: 1.5; }
.movie-personal-summary dd { margin: 5px 0 0; color: var(--ink); font-size: 18px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.movie-personal-summary > p { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.movie-personal-summary .movie-learn { width: 100%; margin-top: 18px; min-height: 48px; font-size: 14px; }
.learn-scope { height: 44px; display: flex; align-items: center; }
.learn-scope > .quiet-button { min-height: 44px; font-size: 13px; }
#learning-feed:has(.learn-scope) .trivia-question { height: calc(var(--question-height) - 44px); min-height: calc(max(96px, var(--learning-scene) - 44px) + 440px); }
#learning-feed:has(.learn-scope) .trivia-film.film-scene { height: max(96px, calc(var(--learning-scene) - 44px)); min-height: max(96px, calc(var(--learning-scene) - 44px)); }
.movie-section { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.movie-section h2 { margin-bottom: 14px; font-size: 17px; font-weight: 600; }
.movie-synopsis { color: var(--ink); font-size: 15px; line-height: 1.8; white-space: pre-line; }
.movie-facts, .movie-facts dl { margin: 0; }
.movie-facts > div, .movie-facts dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 11px 0; }
.movie-facts dt { color: var(--muted); font-size: 13px; line-height: 1.75; }
.movie-facts dd { min-width: 0; margin: 0; color: var(--ink); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.movie-facts dd a { text-decoration-color: var(--line); }
.movie-facts dd a + a { margin-left: 8px; }
.movie-fact dd .movie-source { display: inline; min-height: 0; margin: 0; color: var(--ink); font-size: inherit; line-height: inherit; }
.movie-related {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 0 2px 12px;
  margin: 0 -2px;
  scrollbar-width: thin;
  scrollbar-color: #a0ab8b var(--paper);
}
.related-film { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex: 0 0 140px; min-width: 0; width: 140px; padding: 0; border: 0; background: transparent; text-align: left; scroll-snap-align: start; }
.related-art.film-scene { width: 100%; height: auto; aspect-ratio: 2 / 3; margin-bottom: 12px; border-radius: 12px; }
.related-art > .film-artwork img { object-fit: contain; object-position: center top; }
.related-art .scene-copy { padding: 12px; }
.related-art .scene-copy .film-title { font-size: 19px; }
.related-film > .film-title, .related-film > h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 48px; min-height: 48px; overflow: hidden; font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 400; line-height: 1.2; }
.related-film .movie-year { display: block; margin: 6px 0 0; font-size: 12px; }
.related-film > .film-meta { margin-top: 6px; font-size: 12px; }
.movie-hero.has-artwork .scene-copy, .related-art.has-artwork .scene-copy { opacity: 0; }
.movie-hero.film-scene::before, .related-art.film-scene::before { display: none; }
.movie-source { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-size: 13px; color: var(--muted); text-decoration-color: var(--line); overflow-wrap: anywhere; }
.movie-section > .movie-source { margin-right: 14px; }
.movie-section > .empty-copy { padding: 0; font-size: 14px; }

/* A native modal keeps the question and its focus behind a dismissible sheet. */
.film-sheet { position: fixed; inset: auto 0 0; width: min(100%, 520px); max-width: 520px; max-height: calc(100svh - 24px); margin: auto auto 0; padding: 0; border: 0; border-radius: 20px 20px 0 0; background: var(--paper); color: var(--ink); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #a0ab8b var(--paper); }
.film-sheet::backdrop { background: rgb(15 21 17 / 55%); }
.sheet-open { overflow: hidden; }
.credits-open { overflow: hidden; }
.about-entry { padding: 18px 0; }
.about-entry .quiet-button { min-height: 44px; font-size: 14px; }
.about-sheet #about-title { margin: 12px 0 10px; }
.about-sheet .media-credits { font-size: 14px; line-height: 1.65; }
.about-sheet .tmdb-logo { width: 110px; height: auto; margin: 0 0 18px; }
.film-sheet-shell { position: relative; padding: 10px 20px max(24px, env(safe-area-inset-bottom, 0px)); }
.film-sheet-close { position: sticky; z-index: 5; top: 10px; display: flex; margin: 0 0 10px auto; background: var(--paper); }
.film-sheet #sheet-content { min-width: 0; }
.film-sheet .movie-heading h1 { font-size: 31px; }

@media (hover: hover) {
  .icon-button:hover:not(:disabled) { background: #e8ebdd; }
  .film-info-button:hover { background: rgb(16 22 18 / 94%); }
  .comparison-tile .comparison-choice.film-scene:hover { background: var(--stage-ink); }
  .comparison-tile .comparison-choice:hover::after { border-color: rgb(250 248 240 / 70%); }
  .exercise-footer .order-save:hover:not(:disabled) { background: #e4e8d8; border-color: #a5af93; }
  .exercise-footer .order-save.is-ready:hover:not(:disabled) { background: var(--olive-deep); }
  .related-film:hover > .film-title { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
  .discovery-open:hover > .film-title { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
  .discovery-save.icon-button:hover:not(:disabled) { background: var(--olive-deep); }
}
@media (max-width: 360px) {
  .journal-shell { padding-right: 16px; padding-left: 16px; }
  .exercise-title { font-size: 25px; }
  .comparison-tile .comparison-choice .scene-copy .film-title { font-size: 21px; }
  .order-film { grid-template-columns: 14px minmax(0, 1fr) 28px; padding-right: 6px; padding-left: 6px; gap: 8px; }
  #exercise-feed .order-film > .order-grip { width: 28px; }
  .order-film-info { padding-left: 42px; }
  .order-film-info::before, .order-film-info > .film-artwork { width: 34px; height: 51px; top: 6px; }
  .order-film .film-title { font-size: 17px; }
  .movie-heading h1 { font-size: 31px; }
}
@media (max-height: 740px) {
  .exercise-item[data-type] { padding-top: 6px; }
  .exercise-film .scene-copy .film-title { font-size: 26px; }
  .film-scene .scene-copy { padding: 17px 20px; }
}
@media (max-height: 650px) {
  .trivia-question { touch-action: pan-y; }
  .exercise-item[data-type] { height: auto; min-height: calc(var(--recognition-scene) + 444px); touch-action: pan-y; }
  .exercise-item[data-type="compare"] > .exercise-grid { flex: none; }
  .exercise-footer { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .film-scene .film-artwork img, .order-film-info .film-artwork img { animation: none; }
  .order-film { transition: none; }
  .order-film.is-dragging { scale: 1; }
}

.discovery-overlay { position: absolute; inset: 0 0 auto; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; pointer-events: none; }
.discovery-quick-actions { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 20px 3px 5px; background: linear-gradient(transparent, rgb(12 18 14 / 90%) 32%); pointer-events: auto; }
.discovery-quick-action { min-width: 0; min-height: 48px; padding: 4px 0; border: 0; border-radius: 8px; background: transparent; color: #faf8f0; display: flex; align-items: center; flex-direction: column; gap: 3px; font-size: 10px; line-height: 12px; }
.discovery-quick-action svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.discovery-quick-action[aria-pressed="true"] { background: #faf8f0; color: #3e5130; }
.discovery-quick-action:focus-visible { outline: 2px solid #faf8f0; outline-offset: -2px; }

/* Four fixed pairs: a match changes state, never its place on the board. */
.exercise-item.matching-question[data-type="learn"] { min-height: var(--question-height); }
.match-board { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; margin: 24px 0; touch-action: pan-y; }
.match-column { display: grid; grid-template-rows: repeat(4, 100px); gap: 12px; min-width: 0; }
.match-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1.25; transition: background-color 220ms ease-out, border-color 220ms ease-out, opacity 300ms ease-out; }
.match-label { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.match-film { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; color: var(--muted); }
.match-tile[aria-pressed="true"] { border-color: var(--olive); background: #e6eadb; box-shadow: inset 0 0 0 1px var(--olive); }
.match-tile.is-matched { background: #e6eadb; border-color: #b4bda5; opacity: .48; }
.match-tile.is-mismatch { background: #f1dfd8; border-color: #986352; }
.match-feedback { min-height: 28px; text-align: center; color: var(--olive); }
.discovery-overlay .discovery-saved { position: absolute; inset: 12px 10px auto; padding: 7px 10px; width: fit-content; max-width: calc(100% - 20px); background: var(--stage-ink); color: var(--stage-text); border-radius: 6px; font-size: 12px; line-height: 1.3; }
.discovery-saved:empty { display: none; }
.discovery-film[data-saved-status="pass"] .discovery-art { opacity: .5; }
.discovery-art { transition: opacity 300ms ease-out; }
.film-row { padding-block: 15px; }
.film-row .film-title { font-size: 19px; -webkit-line-clamp: 2; }
.film-info > .film-artwork { width: 42px; height: 63px; }
.film-info, .film-info:has(> .film-artwork) { grid-template-columns: 42px minmax(0, 1fr); gap: 0 12px; }
.film-row .film-actions { margin-top: 2px; gap: 14px; }
.film-actions .quiet-button { font-size: 12px; }
@media (max-height: 740px) { .match-column { grid-template-rows: repeat(4, 84px); gap: 10px; } .match-board { margin-block: 12px; } }
@media (prefers-reduced-motion: reduce) { .match-tile, .discovery-art { transition: none; } }
.people-stat { margin: 26px 0 36px; }
.people-stat h2 { margin: 0 0 16px; font-size: 20px; }
.people-list { margin: 0; padding: 0; list-style: none; }
.person-stat { padding: 14px 0; border-bottom: 1px solid var(--line); }
.person-stat h3 { margin: 0 0 4px; font: 21px/1.2 Georgia, serif; }
.person-stat .film-meta { font-size: 12px; }
.person-films { display: flex; gap: 12px; overflow-x: auto; }
.person-films button { max-width: 180px; flex: 0 0 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; min-height: 44px; }
.stats-note { color: var(--muted); font-size: 12px; line-height: 1.5; }
.multi-question .trivia-film.film-scene { height: clamp(96px, calc(100svh - 688px), 156px); min-height: clamp(96px, calc(100svh - 688px), 156px); }
.trivia-multi-options { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; }
.multi-question .multi-option { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 44px; min-height: 44px; text-align: left; }
.multi-option[aria-pressed="true"] { background: #e6eadb; border-color: var(--olive); }
.multi-check { flex: 0 0 17px; width: 17px; height: 17px; border: 1px solid var(--muted); border-radius: 4px; }
.multi-option[aria-pressed="true"] .multi-check, .multi-option.is-correct .multi-check { background: var(--olive); border-color: var(--olive); box-shadow: inset 0 0 0 3px var(--paper); }
.multi-question .exercise-footer, .ordering-question .exercise-footer { height: 64px; min-height: 64px; }
.multi-question .exercise-footer button, .ordering-question .exercise-footer button { width: 100%; min-height: 48px; }
.multi-question .trivia-feedback, .ordering-question .trivia-feedback { margin: 0; min-height: 0; padding: 0; font-size: 14px; }
.exercise-item.multi-question[data-type], .exercise-item.ordering-question[data-type] { min-height: 620px; }
.trivia-sort-list { list-style: none; padding: 0; margin: 20px 0; }
.trivia-sort-row { display: grid; grid-template-columns: 18px minmax(0,1fr); column-gap: 10px; height: 94px; padding: 10px; margin-bottom: 10px; }
.trivia-sort-row .order-film-info { min-width: 0; }
.trivia-sort-row .film-title { font-size: 17px; line-height: 20px; }
.trivia-sort-row .sort-value:not(:empty) { grid-column: 2; margin-left: 48px; font-size: 12px; color: var(--olive); }
.trivia-sort-row.is-correct { border-color: #b4bda5; }
.sort-instruction { margin: -4px 0 0; font-size: 13px; color: var(--muted); }