/* Screenroam browsing surface. Shared roles; existing specialty tools inherit room.css. */
:root {
  --ink: #111114;
  --panel: #19191e;
  --control: #222228;
  --border: #36363e;
  --muted: #b4b3bf;
  --accent: #ff986e;
  --purple: #c4afe8;
  --surface-hover: #202026;
  --radius: 12px;
  --text: #f3f0ed;
  --space: 8px;
  color: var(--text);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  scrollbar-color: #64616c var(--ink);
}
body { background: var(--ink); }
::selection { background: #624a73; color: #fff; }
header { padding: 20px max(24px, calc((100vw - 1280px) / 2)); background: var(--ink); }
main { max-width: 1328px; padding: 0 24px; }
header .wordmark .brand-name { font-size: 1.75rem; letter-spacing: -.035em; }
header .wordmark .brand-symbol { width: 32px; height: 32px; }
.header-actions { gap: 16px; }
.header-actions #sync { font-size: .8125rem; max-width: 180px; margin: 0; }
button, input, select, textarea { border-radius: 8px; }
button { min-height: 44px; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.tonight-trigger { background: var(--accent); border-color: var(--accent); color: #231812; }
.tonight-trigger:hover { background: #ffb291; border-color: #ffb291; }
.control { padding: 16px 0 20px; background: var(--ink); border-bottom: 1px solid var(--border); }
/* Pinned browsing controls stay clear of keyboard focus outside them (focus inside the bar never scrolls the page), and release short viewports such as landscape phones. */
@media (min-width: 651px) and (height > 37.5em) { html:not(:has(.control :focus)) { scroll-padding-top: 19rem; } }
@media (height <= 37.5em) { .control { position: static; } }
#tabs { gap: 24px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
#tabs button { border-radius: 0; background: transparent; padding: 12px 2px; font-weight: 550; color: var(--muted); border-bottom: 2px solid transparent; }
#tabs button:hover { color: var(--text); background: transparent; }
#tabs button[aria-pressed=true] { color: var(--text); background: transparent; border-bottom-color: var(--purple); box-shadow: none; }
#tabs .tab-icon { width: 18px; height: 18px; }
#tabs #count { color: var(--muted); background: var(--control); margin-left: 2px; }
.toolbar { gap: 12px; }
.search-field { gap: 8px; color: var(--muted); font-size: .8125rem; }
.search-field #search { background: var(--panel); border-color: #74707d; padding: 12px 14px; min-height: 46px; }
.toolbar #import, .browse-options>summary { min-height: 46px; background: transparent; border: 1px solid #57535f; border-radius: 8px; font-size: .875rem; }
.toolbar #import { color: var(--text); }
.browse-options>summary:hover, .toolbar #import:hover { background: var(--control); }
.browse-menu, .header-menu { background: #27262d; padding: 16px; }
/* Tools uses the same menu-item treatment for navigation links and actions. */
.header-more .header-menu :is(a, button) { display: flex; align-items: center; gap: 10px; width: 100%; max-width: none; min-height: 44px; padding: 10px 14px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font-family: inherit; font-size: .875rem; font-weight: 600; line-height: 1.4; text-align: left; white-space: normal; text-decoration: none; }
.header-more .header-menu :is(a, button):hover { background: var(--surface-hover); border-color: transparent; }

.browse-menu .filter-label { margin-bottom: -4px; }
.discovery-browse { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.discovery-browse[hidden] { display: none; }
.discovery-browse .filter-pills { margin: 0; gap: 6px; }
.discovery-browse .filter-pills button { min-height: 40px; padding: 8px 12px; font-size: .8125rem; border-radius: 6px; border-color: transparent; color: var(--muted); }
.discovery-browse .filter-pills button:hover { background: var(--control); color: var(--text); }
.discovery-browse .filter-pills button[aria-pressed=true] { background: #332a40; color: #eadff6; border-color: #675376; }
/* Contrast themes replace the colours that mark selection; system colours keep it visible. */
@media (forced-colors: active) {
 #tabs button[aria-pressed=true] { border-bottom-color: Highlight; }
 #tabs button:not([aria-pressed=true]) { border-bottom-color: Canvas; }
 .discovery-browse .filter-pills button[aria-pressed=true], .recommend-choices input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}
.shuffle-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; min-height: 40px; padding: 8px 0 8px 12px; border: 0; background: transparent; font-weight: 500; color: var(--purple); }
.shuffle-button[hidden] { display: none; }
.section-actions { display: flex; align-items: center; gap: 24px; }
.shuffle-button:hover { background: transparent; color: #eadff6; }
.active-filters { margin-top: 12px; }
.active-filters button { background: var(--control); border-color: #62566e; }
.sectionline { margin: 24px 0 16px; align-items: baseline; }
.sectionline :is(h1,h2) { font-size: 1.5rem; letter-spacing: -.025em; font-weight: 650; }
.sectionline #results { font-size: .875rem; font-variant-numeric: tabular-nums; }
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 48px; }
.card, .card.saved { padding: 20px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); box-shadow: none; }
.card:hover { background: var(--surface-hover); border-color: #64606c; }
.trend-card { grid-template-columns: 112px minmax(0, 1fr); gap: 20px; min-height: 252px; }
.trend-card .poster-open { width: 112px!important; }
.trend-card .film-poster, .trend-card .poster-placeholder { width: 112px; height: 168px; border-radius: 6px; object-fit: cover; }
.trend-card h3 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 8px; font-weight: 650; }
.trend-card .maker { margin: 0 0 8px; font-size: .875rem; line-height: 1.5; font-weight: 400; color: var(--muted); }
.trend-card .quality-line { font-size: .8125rem; color: #b8d6bc; text-decoration: none; line-height: 1.5; }
.trend-card .quality-line:hover { text-decoration: underline; }
.trend-card .discover-synopsis { font-size: .9375rem; line-height: 1.55; margin: 12px 0 16px; color: #d1cdd5; -webkit-line-clamp: 3; }
.trend-card .trend-footer { gap: 8px; }
.trend-card button[data-trend-save] { background: transparent; border-color: #8b6655; color: #ffc3a9; min-height: 44px; margin: 0; }
.trend-card button[data-trend-save]:hover { background: #352821; border-color: var(--accent); }
.discovery-kind { font-size: .75rem; color: var(--muted); }
.card .meta { color: var(--muted); font-size: .8125rem; }
.film-heading { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; margin: 16px 0; }
.film-heading .film-poster, .film-heading .poster-placeholder { width: 96px; height: 144px; object-fit: cover; }
.film-heading h3 { font-size: 1.375rem; font-weight: 650; }
.card .synopsis { font-size: .9375rem; }
.card .actions { gap: 8px; padding-top: 16px; }
.cardlinks a, .cardlinks button { font-size: .8125rem; }
.criterion-spotlight { padding: 24px 0 16px; margin: 8px 0; border-color: var(--border); }
.criterion-heading h3 { font-size: 1.125rem; }
.criterion-row { gap: 24px; }
.criterion-card { flex-basis: 296px; }
.criterion-card .maker { font-weight: 400; color: var(--muted); }
/* October remains recognizable; its decoration stays behind the films. */
.spooky-decor { height: 160px; overflow: hidden; } /* bats ended at 106vw and widened phone pages by 13px */
.halloween-tonight { margin: 0 0 2px; }
.halloween-tonight .film-title { min-height: 32px; }
.halloween-status { margin: 2px 0 12px; font-size: .8125rem; line-height: 1.45; color: #d9cfe0; }
.halloween-status.muted { color: var(--muted); }
.halloween-status button { min-height: 36px; margin-left: 8px; padding: 4px 12px; font-size: .8125rem; }
body.halloween { --accent: #ffa36b; --ink: #131116; background: var(--ink); }
body.halloween header, body.halloween .control { background: var(--ink); }
body.halloween #tabs [aria-pressed=true] { text-shadow: none; }
.spooky-decor .web { opacity: .25; width: 72px; height: 72px; }
.halloween-spotlight { background: #1c171f; border-color: #4a3547; border-radius: var(--radius); padding: 16px 20px 8px; margin-bottom: 8px; }
.halloween-spotlight::after { opacity: .25; width: 56px; height: 56px; }
.halloween-heading { gap: 8px 16px; margin-bottom: 6px; }
.halloween-heading h2 { font-size: 1.125rem; }
.halloween-heading>span { color: #c0adbe; font-size: .8125rem; }
.halloween-tonight { font-size: .875rem; margin: 0 0 8px; }
.halloween-films>summary { min-height: 44px; padding-block: 12px; color: #cbb8d6; font-size: .8125rem; font-weight: 500; }
.halloween-row { gap: 24px; padding-bottom: 12px; }
.halloween-card { flex-basis: 280px; padding: 12px 0 0; border: 0; border-radius: 0; background: transparent; grid-template-columns: 56px minmax(0,1fr); column-gap: 12px; row-gap: 4px; }
.halloween-card.is-tonight { box-shadow: none; }
.halloween-card.is-past { opacity: 1; }
.halloween-card .poster-open { width: 56px; }
.halloween-card img, .halloween-card .poster-placeholder { width: 56px; height: 84px; border-radius: 4px; }
.halloween-card .night-badge { color: #c0adbe; font-size: .75rem; margin-bottom: 4px; }
.halloween-card.is-tonight .night-badge { color: var(--accent); }
.halloween-card .maker { font-size: .8125rem; line-height: 1.4; font-weight: 400; color: #c7bacb; }
.halloween-card .halloween-note { font-style: normal; font-size: .8125rem; line-height: 1.5; margin: 4px 0; }
.halloween-card>[data-halloween-save] { min-height: 44px; padding: 6px 12px; font-size: .8125rem; }
.halloween-card .quality-line { font-size: .75rem; }
/* One clear return path, readable detail content and consistent viewing controls. */
dialog { padding: 28px; background: #1c1a21; border-radius: 16px; }
dialog::backdrop { background: #08070bd9; backdrop-filter: none; }
dialog:has(.film-detail) { width: min(840px, 94vw); }
.close { background: #2e2934; color: var(--text); border-radius: 8px; top: 0; }
.detail-back { display: inline-flex; align-items: center; gap: 8px; margin: -6px 0 20px; padding: 0; border: 0; background: transparent; color: var(--muted); font-weight: 500; }
.detail-back:hover { background: transparent; color: var(--text); }
/* Back and Close share a sticky strip in details; scrolled content passes beneath it, not under the buttons. */
dialog:has(.film-detail) { scroll-padding-top: 72px; }
dialog:has(.film-detail)::before { content: ""; position: sticky; top: -28px; z-index: 2; display: block; height: 64px; margin: -28px -28px -36px; background: inherit; }
dialog:has(.film-detail) .close, .film-detail .detail-back { position: sticky; top: -16px; z-index: 3; }
.detail-heading { grid-template-columns: 144px minmax(0, 1fr); gap: 24px; }
.detail-heading>img { width: 144px; border-radius: 6px; }
.detail-heading h2 { font-size: 2rem; line-height: 1.15; font-weight: 650; letter-spacing: -.025em; margin-right: 0; }
.detail-heading p { font-size: .9375rem; line-height: 1.5; color: #c9c2cf; }
.detail-heading .quality-line small { white-space: nowrap; } /* the checked date never breaks at a hyphen */
.detail-heading .primary { min-height: 44px; }
.detail-jumps { padding-block: 16px; margin: 24px 0; border-block: 1px solid var(--border); }
.detail-jumps button { background: transparent; border-color: #625a6c; font-weight: 500; }
.film-detail h3 { margin: 28px 0 12px; font-size: 1.125rem; font-weight: 650; }
.film-detail>p { line-height: 1.65; color: #ded8e2; }
.detail-sources { padding-top: 16px; border-top: 1px solid var(--border); }
.detail-feedback>summary, .detail-context>summary, .detail-release>summary, .near-coverage>summary, #modalBody>details>summary { min-height: 44px; padding-block: 12px; }
footer { padding: 24px max(24px, calc((100vw - 1280px) / 2)); border-color: var(--border); line-height: 1.6; }
@media (min-width: 651px) and (max-width: 1050px) {
 .trend-card { grid-template-columns: 88px minmax(0,1fr); gap: 16px; }
 .trend-card .poster-open { width: 88px!important; }
 .trend-card .film-poster, .trend-card .poster-placeholder { width: 88px; height: 132px; }
 .trend-footer .discovery-kind { flex-basis: 100%; }
 #tabs { gap: 20px; }
}
@media (max-width: 650px) {
 header { padding: 12px 16px; gap: 10px; }
 .spider-thread { height: 38px; } /* stays above the full-width tonight button */
 main { padding: 0 16px; }
 header .wordmark .brand-name { font-size: min(1.5rem, 7.5vw); } /* larger text cannot run the wordmark under Tools */
 header .wordmark .brand-symbol { width: 28px; height: 28px; }
 .header-more { top: 9px; right: 16px; }
 .header-actions { gap: 8px; }
 .header-actions #tonight { min-height: 44px; }
 .control { position: static; padding: 4px 0 12px; }
 #tabs { gap: 8px; margin-bottom: 12px; justify-content: space-between; flex-wrap: wrap; } /* larger text wraps tabs instead of overlapping them */
 #tabs button { padding: 10px 2px; flex: 0 1 auto; font-size: .8125rem; min-height: 44px; }
 #tabs #count { display: none; }
 .toolbar { grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
 .search-field { gap: 6px; }
 .toolbar .search-field { grid-column: 1/-1; }
 .toolbar:has(.browse-options[hidden]) #import { grid-column: 1/-1; } /* no empty Filters column on For You and Near Me */
 .toolbar #import, .browse-options>summary { min-height: 44px; }
 .discovery-browse { flex-wrap: wrap; gap: 8px; margin-top: 8px; }
 .discovery-browse .filter-pills { flex-wrap: wrap; max-width: 100%; padding: 2px; }
 .discovery-browse .filter-pills button { flex: none; white-space: nowrap; min-height: 44px; }
 .section-actions { gap: 12px; }
 .shuffle-button { min-height: 44px; padding: 4px 0; font-size: .8125rem; }
 .sectionline { margin: 14px 0 10px; }
 .sectionline :is(h1,h2) { font-size: 1.375rem; }
 .grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
 .card, .card.saved { padding: 16px; }
 .trend-card { grid-template-columns: 80px minmax(0,1fr); gap: 14px; min-height: 0; }
 .trend-card .poster-open { width: 80px!important; }
 .trend-card .film-poster, .trend-card .poster-placeholder { width: 80px; height: 120px; }
 .trend-card h3 { font-size: 1.1875rem; }
 .trend-card .maker { font-size: .8125rem; }
 .trend-card .discover-synopsis { -webkit-line-clamp: 3; font-size: .875rem; margin: 10px 0 12px; }
 .trend-card .trend-footer { align-items: start; }
 .trend-footer .discovery-kind { flex-basis: 100%; }
 .trend-card button[data-trend-save] { font-size: .8125rem; padding-inline: 10px; }
 .film-heading { grid-template-columns: 80px minmax(0,1fr); gap: 14px; }
 .film-heading .film-poster, .film-heading .poster-placeholder { width: 80px; height: 120px; }
 .halloween-spotlight { padding: 12px 14px 2px; }
 .halloween-heading { padding-right: 0; }
 .halloween-heading h2 { font-size: 1rem; }
 .halloween-heading>span { font-size: .75rem; }
 .halloween-card { flex-basis: 258px; }
 .halloween-row { gap: 20px; }
 .halloween-card .halloween-note { margin: 0; }
 .halloween-films>summary { padding-block: 8px; }
 .halloween-spotlight:has(.halloween-films:not([open])) { padding-bottom: 2px; }
 dialog, dialog:has(.film-detail) { width: calc(100% - 16px); max-width: calc(100% - 16px); max-height: calc(100dvh - 16px); padding: 20px; }
 .detail-back { font-size: .8125rem; margin-bottom: 16px; }
 dialog:has(.film-detail)::before { top: -20px; height: 60px; margin: -20px -20px -40px; }
 dialog:has(.film-detail) .close, .film-detail .detail-back { top: -8px; }
 .detail-heading { grid-template-columns: 88px minmax(0,1fr); gap: 16px; }
 .detail-heading>img { width: 88px; }
 .detail-heading h2 { font-size: 1.5rem; }
 .detail-heading p { font-size: .8125rem; }
 .detail-heading .primary { font-size: .8125rem; padding: 10px; }
 .detail-jumps { gap: 6px; margin: 20px 0; }
 .detail-jumps button { font-size: .8125rem; padding: 8px; }
 .film-screening-search label { min-width: 0; flex-basis: 40%; }
 .film-screening-search input, .film-screening-search select { min-width: 0; }
 footer { padding: 24px 16px; }
}

/* Progressive content uses the same restrained room typography. */
.sectionline h1{margin:0}
a.poster-open{display:block;text-decoration:none;padding:0;min-height:0;border:0;background:none;flex-shrink:0}
a.film-title{text-decoration:none}
a.film-title:hover{text-decoration:underline}
a.poster-open:focus-visible,a.film-title:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.catalog-fallback,.catalog-detail{grid-column:1/-1;max-width:780px;line-height:1.65}
.catalog-detail h2,.catalog-entry h2{font-size:1.125rem;margin:22px 0 8px}
.catalog-detail p,.catalog-entry p{margin:0 0 12px}
.catalog-detail a,.catalog-fallback a{color:var(--accent)}
.catalog-poster{float:right;object-fit:cover;border-radius:6px;margin:0 0 20px 24px}
.catalog-detail nav{clear:both;padding:20px 0}
@media(max-width:600px){.catalog-poster{width:100px;height:150px;margin-left:16px}.catalog-detail{overflow-wrap:anywhere}}
/* Compact film grids share one density; phones retain poster beside copy. */
#grid:has(.discover-film) { grid-template-columns: minmax(0, 1fr); gap: 28px 12px; }
.discover-film.card { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: stretch; gap: 14px; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.discover-film.card:hover { background: transparent; border-color: transparent; }
.discover-film .poster-open { width: 80px!important; align-self: start; border-radius: 6px; overflow: hidden; }
.discover-film .film-poster, .discover-film .poster-placeholder { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; border-radius: 6px; }
.discover-film .poster-placeholder { display: grid; } /* keeps the fallback icon centered */
.discover-film .trend-content { display: flex; flex-direction: column; align-self: stretch; min-width: 0; width: 100%; height: auto; container-type: inline-size; }
.discover-film h3 { margin: 0 0 6px; font-size: 1.0625rem; line-height: 1.3; font-weight: 650; letter-spacing: -.01em; overflow-wrap: anywhere; }
.discover-film .maker { margin: 0 0 6px; font-size: .8125rem; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* long anthology credits stay complete in details */
.discover-film .quality-line { display: block; margin: 4px 0 0; font-size: .8125rem; line-height: 1.5; white-space: normal; color: var(--text); text-decoration: none; }
.discover-film .quality-line:hover { text-decoration: underline; text-underline-offset: 3px; }
.discover-film .quality-line strong { font-weight: 650; font-variant-numeric: tabular-nums; }
.discover-film .rating-count { display: block; color: var(--muted); font-size: .75rem; }
.discover-release { color: var(--purple); font-size: .8125rem; line-height: 1.5; text-underline-offset: 3px; }
.discover-film .trend-footer { display: grid; grid-template-columns: minmax(0, 1fr) 6rem; gap: 8px; align-items: end; margin-top: auto; padding-top: 8px; }
.discover-film .compare-entry { justify-self: end; }
.discover-film button[data-trend-save] { grid-column: 2; width: 100%; min-height: 44px; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-weight: 500; font-size: .8125rem; }
.discover-film button[data-trend-save]:hover:not(:disabled) { background: var(--control); border-color: var(--muted); }
.discover-film button[data-trend-save]:disabled { color: var(--muted); opacity: 1; border-color: transparent; }
.discover-empty, .discover-upcoming-section, .discover-section-heading { grid-column: 1 / -1; }
.discover-empty { color: var(--muted); line-height: 1.5; }
.discover-upcoming-section { padding-block: 24px; margin-block: 8px; border-block: 1px solid var(--border); }
.discover-section-heading h2 { margin: 0; font-size: 1.125rem; font-weight: 650; }
.discover-upcoming { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 12px; margin-top: 16px; }
.discover-stage { color: var(--purple); font-size: .75rem; margin: 0 0 3px; }
.discover-unrated { font-size: .75rem; color: var(--muted); margin: 8px 0 0; line-height: 1.5; }
.discover-interest { margin-top: 10px; color: var(--muted); font-size: .8125rem; line-height: 1.5; text-decoration: none; }
.discover-interest:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 650px) {
 .discover-film h3 { font-size: 1rem; }
 .discover-upcoming-section { padding-block: 20px; }
 @container (max-width: 12.5em) {
  .discover-film .trend-footer { grid-template-columns: minmax(0, 1fr); }
  .discover-film .compare-entry { justify-self: start; }
  .discover-film button[data-trend-save] { grid-column: 1; }
 }
}
#mainContent { container: discover-layout / inline-size; }
@media (min-width: 651px) {
 #grid:has(.discover-film), .discover-upcoming { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); gap: 28px 16px; }
 /* Keep six opening films out of a five-plus-one row without shrinking tracks. */
 @container discover-layout (width >= calc(57.5rem + 64px)) and (width < calc(69rem + 80px)) {
  #grid:has(.discover-film), .discover-upcoming { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 }
 .discover-film.card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 8px; }
 .discover-film .poster-open { width: 128px!important; max-width: 100%; justify-self: center; }
 .discover-film .trend-footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: 4px; }
 @container (max-width: 9.5em) {
  .discover-film .trend-footer { grid-template-columns: minmax(0, 1fr); }
  .discover-film .compare-entry { justify-self: start; }
  .discover-film button[data-trend-save] { grid-column: 1; }
 }
}

.compare-entry{display:inline-flex;align-items:center;min-height:44px;padding:8px 4px;font-size:14px;text-underline-offset:4px}

/* Optional supporting context stays quiet beside the primary film facts. */
.discover-evidence { margin-top: 8px; font-size: .8125rem; line-height: 1.5; color: var(--muted); }
/* Override the inherited card-details margin without shrinking the disclosure target. */
.discover-film .discover-evidence { margin-top: 4px; }
.discover-evidence > summary, .where-to-watch > summary, .taste-options > summary { cursor: pointer; min-height: 44px; padding-block: 12px; }
.discover-evidence > summary:hover, .where-to-watch > summary:hover, .taste-options > summary:hover { color: var(--text); }
.discover-evidence p { overflow-wrap: anywhere; }
.where-to-watch { margin-block: 12px; }
.where-to-watch > summary { font-weight: 550; }

/* Full upcoming collection; card geometry and editorial preview stay unchanged. */
.upcoming-controls { grid-column: 1 / -1; margin-block-start: 20px; }
.upcoming-controls p { color: var(--muted); font-size: .875rem; line-height: 1.5; max-width: 65ch; }
.upcoming-controls p:empty { margin: 0; }
.upcoming-controls button { min-height: 44px; max-width: 100%; white-space: normal; }
.upcoming-controls button[aria-disabled="true"] { opacity: .65; cursor: wait; }