/* Colors, spacing, sizes, the top bar, buttons, dialogs, Appearance controls, and scroll bars come from
   ../design (tokens.css, components.css), shared with the other apps. These are the tokens only Favorites uses. */
:root {
  --imdb: #f5c518;
  --rt-fresh: #fa320a;
  --rt-rotten: #4caf50;
  --meta: #66cc33;
  --hardcover: #6366f1;
  --apple-books: #ff9500;
}

body { background-attachment: fixed; min-height: 100vh; }
main { padding: 8px var(--page-pad-x) 60px; max-width: 1600px; margin: 0 auto; }   /* lined up with the top bar */

/* ---------- banner ---------- */
.banner {
  display: flex; align-items: center; gap: 14px; margin-top: 18px;
  padding: 14px 18px; border-radius: var(--radius-lg);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 3%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.banner .grow { flex: 1; }
.progress { height: 6px; background: var(--panel-2); border-radius: var(--radius-pill); overflow: hidden; margin-top: 8px; }
.progress > div { height: 100%; background: var(--accent); transition: width var(--fill-dur) var(--ease); }

/* ---------- list + genre tabs ---------- */
.lists { display: flex; gap: 28px; margin: 26px 0 6px; border-bottom: 1px solid var(--line); }
.lists button {
  border: 0; background: none; cursor: pointer; padding: 10px 0 14px; position: relative;
  font-family: var(--serif); font-size: var(--title-lg); color: var(--muted);
}
.lists button.active { color: var(--text); }
.lists button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: var(--radius-xs); background: var(--accent); }
.lists .count { font: 600 var(--text-sm) var(--font); color: var(--muted); background: var(--panel); padding: 2px 8px; border-radius: var(--radius-pill); vertical-align: middle; margin-left: 4px; }

.genres { display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 6px; scrollbar-width: none; }
.genres::-webkit-scrollbar { display: none; }
.genres button {
  flex: none; border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  padding: 7px 14px; border-radius: var(--radius-pill); cursor: pointer; font-weight: 500; font-size: var(--text-md);
}
.genres button:hover { color: var(--text); }
.genres button.active { background: var(--text); color: var(--bg); border-color: transparent; }
.genres button .n { opacity: .55; margin-left: 6px; font-size: var(--text-sm); }

.stats { color: var(--muted); font-size: var(--text-md); }
.stats b { color: var(--text); font-weight: 600; }

.select { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--text-md); }

/* ---------- poster grid ---------- */
.grid { gap: 22px 18px; }

.poster {
  position: relative; aspect-ratio: 2/3; border-radius: var(--radius-md); overflow: hidden;
  background: var(--panel); box-shadow: var(--shadow-card);
  transition: transform var(--lift-dur) var(--ease), box-shadow var(--lift-dur);
}
.card:hover .poster { transform: var(--lift); box-shadow: var(--shadow-card-hover); }
.poster img, .detail-poster img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8%;
  background: var(--panel-2); color: var(--muted); text-align: center; padding: 8%;
}
.fallback .ph-ico { width: 38%; max-width: 72px; display: block; opacity: .75; }
.fallback .ph-ico svg { width: 100%; height: auto; display: block; }
.fallback .ph-title { font-size: var(--text-sm); font-weight: 600; line-height: 1.25; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* small thumbnails show the icon only */
.sp-thumb .ph-title, .st-thumb .ph-title, .result .ph-title { display: none; }
.sp-thumb .ph-ico, .st-thumb .ph-ico, .result .ph-ico { width: 60%; }
.poster .shade {
  position: absolute; inset: auto 0 0 0; height: 48%;
  background: linear-gradient(transparent, rgba(0,0,0,.88));
  opacity: 0; transition: opacity var(--lift-dur);
}
.card:hover .shade { opacity: 1; }
.poster .plot-peek {
  position: absolute; left: 10px; right: 10px; bottom: 10px; font-size: var(--text-sm); color: #d6d9e2;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  opacity: 0; transform: translateY(6px); transition: opacity var(--lift-dur), transform var(--lift-dur) var(--ease);
}
.card:hover .plot-peek { opacity: 1; transform: none; }

.my-score { position: absolute; top: 10px; left: 10px; z-index: 2; }   /* the badge itself is the shared .score-badge */
.my-score.rate { font-size: var(--text-sm); font-weight: 600; border-style: dashed; color: var(--muted); border-color: rgba(255,255,255,.3); opacity: 0; transition: opacity var(--hover-dur); }
.card:hover .my-score.rate { opacity: 1; }
.flags { position: absolute; top: 12px; right: 10px; z-index: 2; display: flex; gap: 4px; }
.flags span { font-size: var(--text-sm); font-weight: 600; background: var(--scrim); padding: 3px 7px; border-radius: var(--radius-pill); }

/* text under posters scales with the card's own width (container query units) */
.card { cursor: pointer; position: relative; container-type: inline-size; }
.card-meta { padding: 10px 2px 0; min-width: 0; }
.card-title {
  font-weight: 600; font-size: clamp(12px, 8.2cqi, 14.5px); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.card-sub {
  display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: center; margin-top: 5px;
  color: var(--muted); font-size: clamp(10.5px, 7cqi, 12.5px);
}
.card-sub > * { white-space: nowrap; }
/* a book's author can be long: let it wrap instead of running out of the card */
.card-sub > .by { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.badge.ol .ui-ico { color: var(--accent); }
.badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 1em; }
.badge.imdb .lbl { background: var(--imdb); color: #000; font-size: .76em; font-weight: 700; padding: 1px 4px; border-radius: var(--radius-xs); letter-spacing: .2px; }
.badge.rt .ico { font-size: 1.05em; }
.badge.hc .lbl, .badge.apple .lbl { font-size: .76em; font-weight: 700; padding: 1px 4px; border-radius: var(--radius-xs); letter-spacing: .2px; }
.badge.hc .lbl { background: var(--hardcover); color: #fff; }
.badge.apple .lbl { background: var(--apple-books); color: #000; }
.badge.pending { color: var(--muted); font-weight: 500; }

.empty { padding: 80px 0; }

.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 0; }
.field.year { max-width: 110px; }

.results { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.result { display: flex; gap: 12px; align-items: center; padding: 6px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; }
.result:hover { background: var(--panel); }
.result.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.result .ph { position: relative; width: 38px; height: 56px; border-radius: var(--radius-xs); overflow: hidden; flex: none; background: var(--panel-2); }
.result .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.result .t { font-weight: 600; }
.result .y { color: var(--muted); font-size: var(--text-sm); }

.chosen { font-size: var(--text-md); color: var(--muted); }

/* detail */
.modal.wide { overflow-x: hidden; }
.detail-hero { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 24px; padding: 22px 26px 20px; align-items: start; }
.detail-hero .detail-poster { width: 150px; }        /* JS widens it to match the text block's height */
.detail-bg { position: absolute; inset: 0; background-size: cover; background-position: center 20%; filter: blur(40px) saturate(1.3); opacity: .28; transform: scale(1.2); }
.detail-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 30%, transparent), var(--bg-2) 92%); }
.detail-hero > :not(.detail-bg) { position: relative; }   /* the blurred backdrop must stay absolute, outside the grid */
.detail-poster { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 2/3; box-shadow: 0 10px 28px rgba(0,0,0,.4); background: var(--panel); position: relative; }

.detail-info h2 { font-family: var(--serif); font-size: var(--title); line-height: 1.15; margin: 0 0 6px; }
.detail-info .facts { color: var(--muted); font-size: var(--text-sm); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.detail-info .facts .tag { border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 0 6px; }
.scores { display: flex; gap: 8px; margin: 12px 0 10px; flex-wrap: wrap; }

.score-box .v small { font-size: var(--text-2xs); color: var(--muted); font-weight: 500; }
.score-box .k { font-size: var(--text-2xs); color: var(--muted); order: 1; }
.score-box.mine { border-color: color-mix(in srgb, var(--c, var(--muted)) 50%, transparent); }
.score-box.mine .v { color: var(--c, var(--text)); }
.plot { color: var(--text-2); margin: 0 0 8px; max-width: 70ch; font-size: var(--text-md); line-height: 1.5; }
.plot.toggle { cursor: pointer; }
.plot.toggle:hover { color: var(--text); }
.plot.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.credits { font-size: var(--text-sm); color: var(--muted); display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.credits span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.credits b { color: var(--muted); font-weight: 500; }

.your-take { border-top: 1px solid var(--line); padding: 22px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; background: var(--sunken); }
.your-take h3 { grid-column: 1 / -1; margin: 0; font-family: var(--serif); font-size: var(--text-lg); }
.your-take .full { grid-column: 1 / -1; }
.detail-foot { display: flex; gap: 10px; padding: 0 28px 22px; align-items: center; background: var(--sunken); flex-wrap: wrap; }
.detail-foot .spacer { flex: 1; }
.rematch { padding: 0 28px 22px; background: var(--sunken); }

/* rating control */


.yn { display: inline-flex; gap: 6px; }
.yn button { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius-sm); padding: 8px 14px; cursor: pointer; color: var(--muted); }
.yn button.on { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-soft); }

/* quick rate */

.quick-top { display: flex; gap: 16px; align-items: flex-end; }

.quick-top h2 { font-family: var(--serif); }
.quick-progress { color: var(--muted); font-size: var(--text-sm); }

@media (max-width: 760px) {
  main { padding: 4px var(--page-pad-x) 40px; }
  .lists button { font-size: var(--title); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px 12px; }
  .detail-hero { gap: 14px; padding: 16px; }
  .detail-hero .detail-poster { width: 84px !important; }
  .detail-info h2 { font-size: var(--text-lg); }
  .your-take { grid-template-columns: 1fr; padding: 20px; }
}

/* ---------- three-part scorecard ---------- */
.scorecard { display: flex; flex-direction: column; gap: 12px; background: color-mix(in srgb, var(--text) 3%, transparent); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; color: var(--text); font-weight: 400; }
.sc-total { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sc-total-val { font-size: var(--number); font-weight: 700; line-height: 1; color: var(--c, var(--muted)); font-variant-numeric: tabular-nums; }
.sc-total-label { color: var(--muted); font-size: var(--text-md); }

.sc-row { display: grid; grid-template-columns: 180px 1fr 38px 22px; align-items: center; gap: 14px; }
.sc-name { display: flex; flex-direction: column; line-height: 1.25; }
.sc-name b { font-weight: 600; font-size: var(--text-md); }
.sc-name span { font-size: var(--text-2xs); color: var(--muted); }
.sc-val { font-weight: 700; font-size: var(--text-lg); text-align: right; color: var(--c, var(--muted)); font-variant-numeric: tabular-nums; }
.sc-clear { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: var(--text-sm); padding: 0; }
.sc-clear:hover { color: var(--text); }
/* each part uses the shared rainbow rating slider (.slide.rate in components.css); an unset part is faded there */
.sc-row .slide { flex: 1 1 auto; padding: 0; }
.sc-row .slide::after { display: none; }
.sc-ticks { margin-left: 194px; margin-right: 88px; }   /* the slider column: past the name (180 + 14 gap), short of score + ✕ (38 + 22 + two 14 gaps) */
.dims { display: flex; flex-direction: column; gap: 8px; }
.dim-row { display: grid; grid-template-columns: 120px 1fr 90px; gap: 8px; align-items: center; }
.dim-row .w { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.dim-row .w .field { padding: 10px 8px; }
@media (max-width: 760px) {
  .sc-row { grid-template-columns: 1fr 38px 22px; }
  .sc-name { grid-column: 1 / -1; flex-direction: row; gap: 8px; align-items: baseline; }
  .sc-ticks { margin: 0 88px 0 0; }

}

/* ---------- watch-list priority ---------- */
.rank {
  position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 9px; border-radius: var(--radius-sm);
  background: var(--scrim); backdrop-filter: blur(6px); color: var(--accent-text); font-weight: 700; font-size: var(--text-md);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.rank.big { font-size: var(--text-lg); }

.grid.draggable .card { cursor: grab; }
.card.dragging { opacity: .35; }
.card.drop-before .poster { box-shadow: -6px 0 0 -1px var(--accent), var(--shadow-card); }
.card.drop-after .poster { box-shadow: 6px 0 0 -1px var(--accent), var(--shadow-card); }

/* ---------- TV season progress on cards ---------- */
.season-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.6); z-index: 2; }
.season-bar > div { height: 100%; background: var(--accent); }

/* ---------- watch history ---------- */
.history { display: flex; flex-direction: column; gap: 8px; color: var(--text); font-weight: 400; }
.history-list { display: flex; flex-wrap: wrap; gap: 6px; }


.history-add .field { width: auto; padding: 6px 10px; }

/* ---------- seasons ---------- */
.seasons-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seasons { display: flex; flex-direction: column; gap: 6px; color: var(--text); font-weight: 400; }
.season { border: 1px solid var(--line); border-radius: var(--radius-md); background: color-mix(in srgb, var(--text) 2%, transparent); }
.season.open { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.season-summary { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; }
.season-summary:hover { background: color-mix(in srgb, var(--text) 4%, transparent); border-radius: var(--radius-md); }

.season.seen .season-seen { background: var(--accent); border-color: var(--accent); }
.season:not(.seen) b { color: var(--muted); }

.chev { color: var(--faint); font-size: var(--text-sm); }
.season-body { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 12px; }
.season-actions { display: flex; align-items: center; }
.scorecard.compact { padding: 10px 12px; gap: 8px; }
.scorecard.compact .sc-total-val { font-size: var(--title-lg); }
.scorecard.compact .sc-name span { display: none; }
.scorecard.compact .sc-row { grid-template-columns: 110px 1fr 38px 22px; }
.scorecard.compact .sc-ticks { margin-left: 124px; }

/* ---------- view nav ---------- */
.viewnav { display: flex; gap: 4px; margin-left: 6px; }
.viewnav button { border: 0; background: none; color: var(--muted); font-weight: 600; padding: 7px 12px; border-radius: var(--radius-sm); cursor: pointer; }
.viewnav button:hover { color: var(--text); }
.viewnav button.active { color: var(--text); background: var(--panel); box-shadow: inset 0 -2px 0 var(--accent); }

/* ---------- global search ---------- */
.search-pop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 380px; z-index: 50;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 6px; max-height: 70vh; overflow-y: auto;
}
.sp-head { font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px; }
.sp-empty { color: var(--muted); padding: 12px 10px; font-size: var(--text-md); }
.sp-row { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.sp-row.sel, .sp-row:hover { background: var(--panel-2); }
.sp-thumb { position: relative; width: 34px; height: 50px; border-radius: var(--radius-xs); overflow: hidden; flex: none; background: var(--panel); }
.sp-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.sp-thumb .fallback { position: absolute; inset: 0; font-size: 0; }
.sp-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sp-main b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-main span { font-size: var(--text-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-main em { font-style: normal; font-weight: 600; }
.sp-main em.l-watched { color: var(--good-text); } .sp-main em.l-watching { color: var(--ok-text); }
.sp-main em.l-watchlist { color: var(--accent-text); } .sp-main em.l-archive { color: var(--muted); }
.sp-score { font-weight: 700; color: var(--c); min-width: 30px; text-align: right; }
.sp-add { color: var(--accent-text); font-weight: 600; font-size: var(--text-md); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-top: 4px; padding: 12px 10px; }

/* ---------- archive ---------- */
.card.archived .poster img { filter: grayscale(.85) brightness(.75); }
.card.archived:hover .poster img { filter: none; }
.tag.archived-tag { color: var(--muted); border-color: var(--muted); }

/* ---------- stats ---------- */
.st-head { margin: 26px 0 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.st-head h1 { font-family: var(--serif); font-size: var(--title-lg); margin: 0; }
.st-head p { color: var(--muted); margin: 4px 0 0; }
.bento { grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; }
.bento .tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; overflow: hidden; position: relative; }
.bento .tile h4 { margin: 0 0 10px; font-size: var(--text-2xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.bento .big { font-size: var(--number); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.bento .big small { font-size: var(--text-base); color: var(--muted); font-weight: 500; letter-spacing: 0; }
.bento .sub { color: var(--muted); font-size: var(--text-sm); margin-top: 6px; }

.bento .s6 { grid-column: span 6; }
.bento .r2 { grid-row: span 2; } .bento .r3 { grid-row: span 3; }

.bento .vs { display: flex; gap: 22px; }
.bento .vs b { display: block; font-size: var(--title-lg); font-weight: 700; }
.bento .vs span { font-size: var(--text-sm); color: var(--muted); }

.st-list { list-style: none; margin: 0; padding: 0; }
.st-list li { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: var(--text-md); }
.st-list li:last-child { border: 0; }
.st-list li:hover b { color: var(--accent-text); }
.st-list .k { order: -2; color: var(--muted); font-weight: 700; width: 16px; }
.st-list .st-thumb { order: -1; }
.st-thumb { position: relative; width: 28px; height: 42px; border-radius: var(--radius-xs); overflow: hidden; flex: none; background: var(--panel-2); }
.st-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.st-thumb .fallback { position: absolute; inset: 0; font-size: 0; }
.st-list b { flex: 1; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.st-list .sc { font-weight: 700; color: var(--c); }
.st-list.compact li { padding: 4px 0; }
.delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.delta.up { color: var(--good-text); } .delta.down { color: var(--bad-text); }
.st-empty { color: var(--muted); font-size: var(--text-md); line-height: 1.5; }
.bento .strip { display: flex; gap: 10px; height: calc(100% - 30px); overflow-x: auto; scrollbar-width: none; }

.hbar { display: grid; grid-template-columns: minmax(0, 150px) 1fr 70px; align-items: center; gap: 10px; font-size: var(--text-sm); margin-bottom: 8px; }
.hbar > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar .track { height: 10px; background: var(--panel-2); border-radius: var(--radius-pill); overflow: hidden; }
.hbar .fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, var(--panel)), var(--accent)); }
.hbar > span:last-child { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(6, 1fr); }

  .bento .s6 { grid-column: span 6; }
}
@media (max-width: 640px) {
  .bento .tile { grid-column: span 6 !important; }
  .search-pop { min-width: 0; }
}

/* ---------- stats v2 ---------- */
.period-seg button { font-weight: 600; }
.st-blank { padding: 40px 28px; text-align: center; background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius-lg); }
.st-blank .big { font-family: var(--serif); font-size: var(--title-lg); font-weight: 700; }
.st-blank p { color: var(--muted); max-width: 520px; margin: 10px auto 0; line-height: 1.5; }
.st-summary { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 14px; }
.st-summary .tile, .st-tops .tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; }
.st-summary h4, .st-tops h4 { margin: 0 0 12px; font-size: var(--text-2xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); display: flex; align-items: center; gap: 6px; }
.st-summary .big { font-size: var(--number); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.st-summary .big small { font-size: var(--text-base); color: var(--muted); font-weight: 500; letter-spacing: 0; }
.st-summary .sub { color: var(--muted); font-size: var(--text-sm); margin-top: 8px; }
.st-summary .vs { display: flex; gap: 26px; flex-wrap: wrap; }
.st-summary .vs b { display: block; font-size: var(--title-lg); font-weight: 700; line-height: 1.05; }
.st-summary .vs span { font-size: var(--text-sm); color: var(--muted); }
.st-section { font-family: var(--serif); font-size: var(--title); margin: 30px 0 12px; }
.st-tops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.top-list { list-style: none; margin: 0; padding: 0; }
.top-list li { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.top-list li:last-child { border: 0; }
.top-list li:hover b { color: var(--accent-text); }
.top-list .k { width: 18px; text-align: right; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.top-list .st-thumb { width: 32px; height: 48px; }
.top-list.few .st-thumb { width: 54px; height: 80px; border-radius: var(--radius-xs); }
.top-list.few li { padding: 10px 0; }

.top-list.few b { font-size: var(--text-base); }
.tl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tl-main b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-main span { font-size: var(--text-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-list .sc { font-weight: 700; color: var(--c); font-variant-numeric: tabular-nums; }
.bento .s12 { grid-column: span 12; }

.st-list .hint { white-space: nowrap; }
@media (max-width: 1000px) {
  .st-summary { grid-template-columns: 1fr 1fr; }
  .st-summary .tile:last-child { grid-column: span 2; }
  .st-tops { grid-template-columns: 1fr; }
  .bento .s12 { grid-column: span 6; }

}
@media (max-width: 640px) {
  .st-summary { grid-template-columns: 1fr; }
  .st-summary .tile:last-child { grid-column: auto; }
}

/* ---------- one-click "Watched" on watch-list cards ---------- */
.quick-watch {
  position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 8px); z-index: 3; white-space: nowrap;
  border: 0; border-radius: var(--radius-pill); padding: 7px 14px; font-weight: 700; font-size: var(--text-sm); cursor: pointer;
  background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px rgba(0,0,0,.5);
  opacity: 0; transition: opacity var(--hover-dur), transform var(--hover-dur);
}
.card:hover .quick-watch { opacity: 1; transform: translate(-50%, 0); }
.card:has(.quick-watch):hover .plot-peek { bottom: 52px; -webkit-line-clamp: 3; }
@media (hover: none) { .quick-watch { opacity: 1; transform: translate(-50%, 0); padding: 5px 10px; font-size: var(--text-2xs); } }

/* ---------- franchise cards ---------- */
.card.group .poster { background: none; box-shadow: none; overflow: visible; }

/* back layers peek out to the right; the first film is on top */

.card.group:hover .poster { transform: none; box-shadow: none; }

.card.group .flags span { background: var(--accent); color: var(--accent-ink); }

.fr-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fr-summary div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; }
.fr-summary b { display: block; font-size: var(--title); font-weight: 700; line-height: 1.1; }
.fr-summary span { font-size: var(--text-2xs); color: var(--muted); }
.fr-list { list-style: none; margin: 0; padding: 0; }
.fr-list li { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: var(--radius-sm); }
.fr-list li:hover { background: var(--panel); }
.fr-list .k { width: 16px; text-align: right; color: var(--muted); font-weight: 700; }
.fr-list .st-thumb { width: 36px; height: 54px; }
.fr-list .sc { min-width: 34px; text-align: right; font-weight: 700; color: var(--c); }
.fr-list em { font-style: normal; font-weight: 600; }
.fr-list em.l-watched { color: var(--good-text); } .fr-list em.l-watching { color: var(--ok-text); }
.fr-list em.l-watchlist { color: var(--accent-text); } .fr-list em.l-archive { color: var(--muted); }

.sib { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: var(--radius-pill); padding: 4px 10px; font-size: var(--text-sm); cursor: pointer; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sib:hover { color: var(--text); border-color: var(--accent); }

/* ---------- needs attention ---------- */

.reason { margin-top: 5px; font-size: var(--text-2xs); color: var(--ok-text); line-height: 1.3; }
.attention-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 26px; font-size: var(--text-md); color: var(--ok-text);
  background: color-mix(in srgb, var(--ok) 10%, transparent); border-top: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); position: relative; }

/* =====================================================================
   Calmer main screen: genre dropdown + Filter / Sort buttons, ☰ menu
   ===================================================================== */
.toolbar { margin: 16px 0 20px; }   /* the row itself is shared (components.css) */
/* .tool (Filter, Sort, the genre box) is in design/components.css, used by every app's toolbar */

/* .pop-clear (the Clear filters row) is in design/components.css */

/* list tabs: Archive / Needs attention only appear while you're in them */

.lists .back { font: 400 var(--text-md) var(--font); color: var(--muted); align-self: center; padding: 4px 6px 10px; margin-left: -18px; }
.lists .back:hover { color: var(--text); }

/* ---------- tags ---------- */
/* .tag-chip is also .chip (design/components.css); these are the variants only Favorites has */
.tag-chip.mine { padding: 0 4px 0 0; border-style: dashed; }
.tag-chip.mine button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 4px 4px 4px 11px; }
.tag-chip.mine .x { padding: 4px 6px; font-size: 10px; color: var(--faint); }
.tag-chip.mine .x:hover { color: var(--bad-text); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag-add { border: 1px dashed var(--line); background: none; border-radius: var(--radius-pill); padding: 4px 11px; font-size: var(--text-sm); width: 110px; outline: none; color: var(--text); }
.tag-add:focus { border-color: var(--accent); border-style: solid; width: 160px; }
.stats .tag-chip { margin: 0 2px; vertical-align: middle; }
.sp-tag .tag-chip { pointer-events: none; }

/* ---------- franchise title rename ---------- */
h2.editable { cursor: text; border-radius: var(--radius-sm); padding: 2px 8px; margin-left: -8px; }
h2.editable:hover { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.title-edit { font-family: var(--serif); font-size: var(--title); font-weight: 700; padding: 4px 10px; margin-right: 12px; }

/* ---------- add dialog: one scroll area, equal toggles ---------- */

#addModal .results { flex: 1 1 auto; min-height: 0; max-height: 300px; }
#addModal .results:empty { display: none; }
#addTypeSeg, #typeSeg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-self: flex-start; }
#addTypeSeg button, #typeSeg button { text-align: center; white-space: nowrap; }

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


a.btn { text-decoration: none; color: var(--text); display: inline-flex; align-items: center; }

/* ---------- rating boxes: contents centered ---------- */
.score-box { background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 5px 11px; display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 38px; }
.score-box .v { font-size: var(--text-lg); font-weight: 700; order: 2; line-height: 1; display: flex; align-items: baseline; }
.score-box .k { display: flex; align-items: center; gap: 5px; line-height: 1; }
.q-season { font: 600 var(--text-base) var(--font); color: var(--accent-text); }

/* the drop-down box and combo box (.cs, .cs-btn, .cs-pop, .combo) are in design/components.css */

/* =====================================================================
   Batch: franchise hover, menus in dialogs, combobox, tag/genre chips
   ===================================================================== */
/* top rating color follows the theme's accent (and so does the slider's high end) */
:root[data-theme] { --great: var(--accent); }

/* ---------- franchise cards (the fan itself is under "Franchise fan" below) ---------- */
.card.group { z-index: 0; --fan-dur: calc(var(--lift-dur) * 1.3); }   /* the fan spreads a little slower than the lift, so the posters trail it */
.card.group .my-score { left: 10px; }

/* ---------- ☰ menus inside dialogs ---------- */
.detail-actions { position: absolute; right: 0; top: -2px; display: flex; align-items: center; gap: 2px; z-index: 5; }
.detail-info { min-width: 0; padding-right: 76px; }
.head-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: none; }
.modal-head { gap: 12px; }
.fr-list.editing li { cursor: default; }
.fr-list.editing li:hover { background: none; }

#franchiseModal .modal-body { max-height: calc(100vh - 140px); overflow-y: auto; }
#franchiseModal:has(.combo .pop:not([hidden])) .modal-body { overflow: visible; }

/* ---------- combobox ---------- */
.combo { flex: 0 1 300px; }
.tag-combo { flex: none; display: inline-block; }

/* ---------- tag vs genre chips ---------- */
.tag-chip.genre { border-style: solid; background: none; }
.tag-chip.genre.on { background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* ---------- search results ---------- */
.sp-all { color: var(--accent-text); font-weight: 600; font-size: var(--text-md); }

.lists .special { color: var(--muted); max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- where you watched ---------- */

.place-edit .combo { flex: 0 0 170px; }
.place-edit .field { padding: 6px 10px; font-size: var(--text-sm); }

/* =====================================================================
   Batch: mosaic franchise hover, themed priority, narrow menu, floating calendar
   ===================================================================== */
/* ---------- priority box follows the theme ---------- */
.rank.big { position: static; padding: 4px 12px; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent-text); backdrop-filter: none; border-radius: var(--radius-sm); }
.priority { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text); font-weight: 400; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; }

/* ---------- search results line ---------- */
.stats .query { color: var(--text); font-weight: 600; }

/* ---------- clickable genres beside the title ---------- */
.genre-link { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; border-bottom: 1px dotted transparent; }
.genre-link:hover { color: var(--accent-text); border-bottom-color: currentColor; }
.facts .sep { margin-right: 2px; }

/* ---------- calendars float over the content (shared .cal) ---------- */
.history, #addWhen { position: relative; }
#addModal .modal-body { flex: 1; min-height: 0; overflow: visible; }
#addModal[open] { display: flex; flex-direction: column; overflow: visible; }

/* =====================================================================
   Batch: fan is back, calendars open upward, steadier detail view, content width
   ===================================================================== */
/* ---------- franchise card: its score and flags lift with the front poster ---------- */
.card.group:hover .my-score, .card.group:hover .flags { z-index: 4; transform: translateY(-6px); transition: transform var(--lift-dur) var(--ease); }

/* ---------- the date buttons row (its calendar is the shared one) ---------- */
.history-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; position: relative; }

/* ---------- detail view: expanding/collapsing the plot must not nudge the scroll position ---------- */
.modal { overflow-anchor: none; }
.modal * { overflow-anchor: none; }

/* =====================================================================
   Franchise fan: at rest two films peek out behind the front poster; on hover every film fans out
   (to the left when the card is at the right edge, .fan-left) and the front poster lifts like a normal card
   ===================================================================== */
.card.group .fan { background: none; box-shadow: none; overflow: visible; }

.card.group .fan .fl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

.card.group:hover .fan { transform: none; box-shadow: none; }
.card.group:hover { z-index: 5; }                         /* stays under the sticky header (z-index 20) */

.card.group .fan .fl.extra { opacity: 0; transition: transform var(--fan-dur) var(--ease), filter var(--fan-dur), opacity var(--hover-dur); }   /* 4th film onward: hidden until hover */
.card.group:hover .fan .fl { transform: translate(calc(var(--i) * var(--step)), calc(var(--i) * 1px - 4px)) rotate(calc(var(--i) * var(--rot))) scale(calc(1 - var(--i) * .02)); box-shadow: -6px 4px 12px rgba(0,0,0,.35); filter: none; }   /* small shadows, so overlapping posters don't stack into a black halo */
.card.group:hover .fan .fl.extra { opacity: 1; }

/* back posters scale from their right edge (as before), so they visibly peek out at rest */
.card.group .fan .fl:not(.front) { transform-origin: right center; }
.card.group.fan-left:hover .fan .fl:not(.front) { transform: translate(calc(var(--i) * var(--step) * -1), calc(var(--i) * 1px - 4px)) rotate(calc(var(--i) * var(--rot) * -1)) scale(calc(1 - var(--i) * .02)); box-shadow: 6px 4px 12px rgba(0,0,0,.35); transform-origin: left center; }

/* ---------- every poster has a light border, hovered or not ---------- */
.poster:not(.fan)::after, .card.group .fan .fl::after, .detail-poster::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none;
  /* Two hairlines, so the edge reads on any poster in any theme: a dark outer line (shows on
     light posters / light pages) with a light line just inside it (shows on dark posters). */
  border: 1px solid rgba(0, 0, 0, .38);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42);
}
/* ---------- franchise stack at rest: same look, a little less projection ---------- */
.card.group:not(:hover) .fan .fl { transform: translateX(calc(min(var(--i), 2) * 2.8%)) scale(calc(1 - min(var(--i), 2) * .05)); }

/* Each poster gets its own compositor layer (will-change, backface-visibility): a border drawn on a rotated
   box is rasterised at an angle and looks jagged; this way the poster is painted upright and the finished
   picture is rotated, so its border stays smooth. The posters behind are dimmed on their artwork, not as a
   whole, because a filter on the whole poster also dimmed its border until it vanished. */
.card.group .fan .fl { position: absolute; inset: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--panel); transform-origin: center bottom; transition: transform var(--fan-dur) var(--ease), filter var(--fan-dur), box-shadow var(--fan-dur); box-shadow: none; transform: translateX(calc(min(var(--i), 2) * 4%)) scale(calc(1 - min(var(--i), 2) * .05)); will-change: transform; backface-visibility: hidden; filter: none; }
.card.group .fan .fl img, .card.group .fan .fl .fallback {
  filter: brightness(calc(1 - min(var(--i), 2) * .2 - min(var(--i), 1) * .2)) saturate(calc(1 - min(var(--i), 2) * .1));
  transition: filter var(--fan-dur);
}
.card.group:hover .fan .fl img, .card.group:hover .fan .fl .fallback { filter: none; }

/* The posters behind (in .backs) are clipped along the front poster's top edge, moving in step with its lift:
   mid-animation their tilted corners used to peek out above it as a stray line. The front poster sits outside
   the clip, so its shadow is whole, like a normal card's. */
.card.group .fan .backs { position: absolute; inset: 0; clip-path: inset(0 -100% -100% -100%); transition: clip-path var(--lift-dur) var(--ease); }
.card.group:hover .fan .backs { clip-path: inset(-6px -100% -100% -100%); }
/* At rest the posters behind can't be hovered. Their peeking edge sits outside the card, and hovering it used to
   open the fan (sometimes to the left), which moved the posters out from under the mouse, closed the fan, and
   repeated: a flicker. Once the card is hovered they can be, so the open fan stays open under the mouse. */
.card.group:not(:hover) .fan .backs { pointer-events: none; }
/* The front poster lifts by changing its box (inset), not with transform: a transformed poster is slid as a
   pre-rendered picture, which smears its 1px border into a thicker ring while it moves. Same 6px lift as a normal
   card, and the same size, so the picture isn't re-cropped. */
.card.group .fan .fl.front { will-change: auto; backface-visibility: visible; transform: none !important; transition: inset var(--lift-dur) var(--ease), box-shadow var(--lift-dur); box-shadow: var(--shadow-card); }
.card.group:hover .fan .fl.front { inset: -6px 0 6px 0; box-shadow: var(--shadow-card-hover); }
/* fanned posters: one soft shadow each, falling away from the front poster so they don't pile up */
.card.group:hover .fan .backs .fl { box-shadow: 4px 6px 14px rgba(0,0,0,.28); }
.card.group.fan-left:hover .fan .backs .fl { box-shadow: -4px 6px 14px rgba(0,0,0,.28); }

/* =====================================================================
   Batch: rating gradient, custom themes + color picker, widths
   ===================================================================== */
/* ---------- 3. narrower content (the header still spans the window) ---------- */
#libraryView, #statsView, #banner { max-width: var(--content-width, none); margin-left: auto; margin-right: auto; }

/* ---------- 4. roomier Quick rate ---------- */
.quick-body { display: flex; flex-direction: column; align-items: stretch; padding: 26px; gap: 20px; }
.quick-top .detail-poster { flex: none; width: 150px; }
.quick-top h2 { margin: 0 0 4px; line-height: 1.15; font-size: var(--title-lg); }

/* ---------- 5. rating colors as text: mixed toward black or white as far as this theme needs to keep them readable
   (--score-keep / --score-toward, worked out by design/themes.js), as the design's .score-ink is ---------- */
:is(.sc-val, .sc-total-val, .score-box.mine .v, .sp-score, .st-list .sc, .top-list .sc, .season-score, .fr-list .sc) {
  color: color-mix(in srgb, var(--c, var(--muted)) var(--score-keep, 100%), var(--score-toward, #fff));
}


/* ---------- stats: score-spread curve ---------- */
.spread { display: block; width: 100%; height: calc(100% - 84px); min-height: 80px; overflow: visible; }
.spread-mean { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .55; }
.spread-axis { display: flex; justify-content: space-between; font-size: var(--text-2xs); color: var(--muted); padding-top: 6px; border-top: 1px solid var(--line); }
.bento .tile .spread + .spread-axis + .sub { margin-top: 4px; }

/* ---------- pending re-match notice ---------- */
.pending-match { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); border-top-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.pending-match .warn-type { color: var(--bad-text); font-weight: 600; flex-basis: 100%; }

/* =====================================================================
   Batch: date ranges for seasons, calmer theme editor
   ===================================================================== */

/* =====================================================================
   Batch: score links, franchise label, built-in theme editing
   ===================================================================== */
a.score-box { text-decoration: none; color: inherit; transition: border-color var(--hover-dur), background var(--hover-dur); }
a.score-box:hover { border-color: var(--accent); background: var(--accent-soft); }
.franchise-chip { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 4px 11px 4px 9px; border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.franchise-chip:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.franchise-chip .ui-ico { width: 15px; height: 15px; color: var(--accent-text); }
.franchise-chip small { font-weight: 500; color: var(--muted); font-size: var(--text-sm); }
.fr-summary b small { font-size: var(--text-md); font-weight: 600; color: var(--muted); }
.fr-list .sc:empty { display: none; }

/* ---------- franchise: the films you don't have yet ---------- */
.fr-missing-head { margin: 18px 0 4px; font-size: var(--text-sm); font-weight: 600; color: var(--text); display: flex; align-items: baseline; gap: 8px; }
.fr-list.missing li { cursor: default; }
.fr-list.missing li:hover { background: none; }
.fr-list.missing .st-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-xs); opacity: .85; }
.fr-list.missing .tl-main b { color: var(--text-2); }
.fr-list.missing .btn { margin-left: auto; flex: none; }

/* ---------- where to watch ---------- */
.where-watch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 2px 0 12px; font-size: var(--text-sm); min-height: 30px; }
.where-watch:empty { display: none; }
.where-watch b { font-size: var(--text-2xs); font-weight: 600; color: var(--muted); margin-right: 2px; }
.svc { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); font: inherit; font-size: var(--text-sm); font-weight: 500; }
.svc:not(:has(img)) { padding-left: 10px; }
.svc img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.svc.mine { border-color: color-mix(in srgb, var(--good) 55%, transparent); background: color-mix(in srgb, var(--good) 12%, transparent); font-weight: 600; }
.svc.other { opacity: .75; }

.services-box { display: flex; flex-direction: column; gap: 10px; font-weight: 400; }
.services-box .field { max-width: 280px; }
.svc-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.svc.pick { cursor: pointer; }
.svc.pick:hover { border-color: var(--accent); }
.svc.pick.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight: 600; }

/* ---------- franchise label: bottom right of the description box ---------- */
.franchise-slot { display: flex; justify-content: flex-end; margin-top: 10px; }
.franchise-slot .franchise-chip { margin: 0; }
.franchise-slot .combo { width: min(280px, 100%); }
.franchise-chip[hidden], .franchise-slot .combo[hidden] { display: none; }

/* ---------- strip under the description: where to watch (left), franchise (right) ---------- */

.detail-strip:not(:has(.where-watch:not(:empty), .franchise-chip:not([hidden]), .combo:not([hidden]))) { display: none; }

.detail-strip .franchise-slot { margin: 0; }
.svc.picked { padding-right: 4px; }
.svc.picked .x { border: 0; background: none; color: var(--faint); cursor: pointer; font-size: var(--text-2xs); padding: 2px 5px; border-radius: var(--radius-pill); }
.svc.picked .x:hover { color: var(--bad-text); }

/* ---------- settings: the "add a service" box keeps its natural height ---------- */
.services-box .combo { max-width: 280px; flex: none; }

/* =====================================================================
   Batch: stats (directors, ridge plot, awards), filter sections, award chips
   ===================================================================== */
.bento .tile h4 .h-count, .st-summary h4 .h-count { margin-left: auto; float: right; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--muted); }
.st-summary.four { grid-template-columns: 1fr 1fr 1.4fr 1.5fr; }
@media (max-width: 1100px) { .st-summary.four { grid-template-columns: 1fr 1fr; } .st-summary.four .tile:last-child { grid-column: auto; } }

/* score spread: three overlapping ridges on one axis */
.bento .tile.spread-tile { grid-row: span 3; overflow: visible; }
.ridges { position: relative; padding-top: 4px; }
.ridge { position: relative; height: 118px; margin-top: -42px; }
.ridge:first-child { margin-top: 0; }
.ridge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ridge-back { fill: var(--panel); opacity: .82; }                 /* keeps the ridge behind from showing through too strongly */

/* filter: one scroll bar for the whole menu; sections fold away */

/* the Filter menu and its sections are shared (filterMenu, .pop-section in design/components.css) */

/* awards are facts, not tags */

button.svc { cursor: pointer; font: inherit; font-size: var(--text-sm); }
button.svc.mine { font-weight: 600; }
button.svc:hover { border-color: var(--accent); }

/* ---------- stats tweaks ---------- */

.ridge-label b { font-weight: 600; font-size: var(--text-base); }
.ridge-label span { color: var(--muted); font-size: var(--text-2xs); }
.award-bars .hbar { grid-template-columns: minmax(0, 170px) 1fr 26px; margin-bottom: 7px; }

.st-summary .sub > span { display: block; }

.ridge-label { position: absolute; left: 2px; display: flex; line-height: 1.25; pointer-events: none; flex-direction: row; align-items: baseline; gap: 6px; bottom: 20px; }

/* disagreement tiles: tall enough for all five rows, and no rule under the last one */
.bento { display: grid; gap: 14px; grid-auto-rows: minmax(118px, auto); }
.bento .tile.disagree { overflow: visible; }      /* lets the rows grow to fit the list */
.bento .tile.disagree .st-list li:last-child { border-bottom: 0; }

/* disagreement rows: your score, theirs, and the gap each sit in their own fixed column */
.st-list .pair { display: inline-flex; gap: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-list .pair span { display: inline-block; text-align: right; }
.st-list .pair span:first-child { min-width: 56px; }
.st-list .pair span:last-child { min-width: 78px; }
.st-list .delta { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- search: the little "i" and its tips ---------- */
.search input { padding-right: 38px; }

.search-info:hover { color: var(--accent-text); }
.search-help { right: 0; left: auto; top: calc(100% + 8px); width: min(340px, calc(100vw - 32px)); padding: 6px 10px 10px; font-size: var(--text-sm); color: var(--text); z-index: 60; }
.search-help dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 2px 8px 10px; }
.search-help dt { font: 500 var(--text-sm) var(--mono); color: var(--accent-text); white-space: nowrap; }
.search-help dd { margin: 0; color: var(--text-2); }
.search-help p { margin: 6px 8px 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }
.search-help code { font: 500 var(--text-sm) var(--mono); color: var(--text-2); }

.search-info { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; display: grid; place-items: center; }
.search-info .ui-ico { width: 20px; height: 20px; }   /* the shared info icon */

/* award chips follow the theme's accent color */
.tag-chip.award { border: 1px solid color-mix(in srgb, var(--imdb) 55%, transparent); color: var(--text); cursor: pointer; padding: 4px 11px; border-radius: var(--radius-pill); font: inherit; font-size: var(--text-sm); font-weight: 500; border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tag-chip.award:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* streaming service chips are plain, not accented */
.svc.mine, button.svc.mine { border-color: var(--line); background: color-mix(in srgb, var(--text) 4%, transparent); font-weight: 500; }
button.svc.mine:hover, button.svc:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* franchise list: IMDb, Rotten Tomatoes, and your score each in a fixed column */
.fr-list .fr-col { flex: none; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.fr-list .fr-col.imdb { width: 84px; }
.fr-list .fr-col.rt { width: 66px; }

.fr-list .fr-col .badge { justify-content: flex-end; }
.fr-list .tl-main { flex: 1; min-width: 0; }

/* the date in the Add dialog is plain text in a chip, so it needs its own padding */
#addDateLabel, #addDateLabel.empty { padding: 6px 13px; line-height: 1.2; white-space: nowrap; }

/* franchise list: numbers and dashes are centered in their column */
.fr-list .fr-col.sc { min-width: 0; color: var(--c, var(--faint)); display: block; width: 46px; text-align: center; }
.fr-list .fr-col:not(:has(.badge)) { text-align: center; }

/* franchise dialog: wider, so long titles fit beside the three score columns */
#franchiseModal { overflow: visible; max-width: none; }

/* franchise list: one header row names the three score columns */

.fr-head .spacer { flex: 1; }
.fr-head .fr-col, .fr-list .fr-col.imdb, .fr-list .fr-col.rt, .fr-list .fr-col.sc { flex: none; width: 58px; text-align: center; font-variant-numeric: tabular-nums; }
.fr-head .fr-col { font-size: var(--text-2xs); font-weight: 600; color: var(--muted); display: flex; justify-content: center; }
.fr-list .fr-col.imdb, .fr-list .fr-col.rt { color: var(--text-2); font-weight: 600; }

.fr-head { display: flex; align-items: center; gap: 12px; padding: 0 6px 4px; margin-top: 14px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }

/* watch location: Streaming / Theaters */
.place-seg { flex: none; }
.place-edit { flex-wrap: wrap; display: flex; align-items: center; gap: 10px; }
.place-edit[hidden] { display: none; }

.scores[hidden] { display: none; }

/* the original-language name beside the English one */
.orig-title { font-family: var(--font); font-size: .55em; font-weight: 500; color: var(--muted); letter-spacing: 0; white-space: nowrap; }

/* "ever" in the all-time stats subtitle: the heading serif, upright, instead of a slanted sans */
.st-head p em { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; color: var(--accent-text); }

/* year view: the 1 / 2 / 3 use the same numerals as the all-time Top 10 */
.top-list.few .k { font-family: inherit; font-size: inherit; width: 18px; }

.splat { width: 1.15em; height: 1.15em; vertical-align: -0.2em; display: inline-block; flex: none; }

/* season rows: a drawn tick (centered, unlike the "✓" character) and "You · score" ahead of IMDb */
.season-seen { width: 22px; height: 22px; border-radius: var(--radius-xs); border: 1.5px solid color-mix(in srgb, var(--text) 30%, transparent); background: none; color: var(--accent-ink); font-weight: 700; cursor: pointer; display: grid; place-items: center; flex: none; font-size: 0; position: relative; padding: 0; }
.season-seen .ui-ico { width: 16px; height: 16px; color: var(--accent-ink); }   /* the shared tick (ico("check")), as in a checkbox */

.season-you .hint { font-size: var(--text-sm); }

.season-imdb { min-width: 74px; display: inline-flex; justify-content: flex-end; }

.season-you { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 8px; min-width: 70px; }
.season-score { font-weight: 700; color: var(--c); min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
.season-imdb .badge { font-variant-numeric: tabular-nums; }

/* the Filter / Sort / Genre menus slide under the top bar when the page scrolls, not over it */
#filterPop, #sortPop, .toolbar .pop, .toolbar .cs-pop { z-index: 15; }

/* Filter menu: the floating bar replaces the browser's (which can't show a grab cursor) */
#filterPop { width: 320px; max-height: min(72vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; scrollbar-width: none; }

/* add dialog: "✓ Added" in the accent color; a slim scroll bar on the results */
.result .have { margin-left: auto; font-size: var(--text-sm); color: var(--accent-text); font-weight: 600; }
.results::-webkit-scrollbar { width: 12px; }
.results::-webkit-scrollbar-track { background: transparent; }
.results::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 30%, transparent); border-radius: var(--radius-pill); border: 3px solid transparent; background-clip: content-box; }
.results::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

.results::-webkit-scrollbar, .pop::-webkit-scrollbar { width: 14px; }
.results::-webkit-scrollbar-thumb, .pop::-webkit-scrollbar-thumb { border: 4px solid transparent; background: color-mix(in srgb, var(--text) 30%, transparent); background-clip: content-box; }
.results::-webkit-scrollbar-thumb:hover, .pop::-webkit-scrollbar-thumb:hover { border-width: 3px; background: color-mix(in srgb, var(--text) 50%, transparent); background-clip: content-box; }

#addWhen[hidden] { display: none !important; }

/* every scrolling list uses the floating grab bar; the browser's own bar is hidden there */
.results, #franchiseModal .modal-body, .cs-pop, .search-pop { scrollbar-width: none; }
.results::-webkit-scrollbar, #franchiseModal .modal-body::-webkit-scrollbar, .cs-pop::-webkit-scrollbar, .search-pop::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* the strip under the description is the same height whether or not there are service chips in it */
.detail-strip .where-watch { margin: 0; min-height: 32px; }
.detail-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 28px; border-top: 1px solid var(--line); position: relative; min-height: 53px; }

/* scroll bars: design/scrollbars.js keeps the gutter (--osb-gutter) and places the bar; nothing per box here */

/* =====================================================================
   Appearance: poster size and font size are adjustable
   ===================================================================== */

#appearanceModal .modal-foot { align-items: center; }

/* The gap between posters is fixed and the row always reaches both edges, so the posters share any leftover width.
   app.js (fitGrid) picks the column count nearest the chosen poster size and sets --cols, so a poster is at most
   about half a column's worth bigger or smaller than that size. The auto-fill rule is only the fallback before it runs. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--card-w, 184px), 100%), 1fr)); }
.grid[style*="--cols"] { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
@media (max-width: 640px) { .grid:not([style*="--cols"]) { grid-template-columns: repeat(auto-fill, minmax(min(var(--card-w, 130px), 46vw), 1fr)); } }

/* =====================================================================
   Every floating scroll bar: the same width (6px, 8px on hover) and a ▲ / ▼ at each end
   ===================================================================== */

/* page numbers under the grid: the shared .pager (components.css, pager.js) */

/* franchise list: "Watched (Archived)"; the note is part of the label (same font and size), only gray */
.fr-list .archived-note { font-style: normal; color: var(--muted); }