/* Measured refinements for the reconstructed example recipes. */
.yt-header { padding-inline: 16px; }
.searchbox { max-width: 640px; }
.searchbox #clear-query { width: auto; min-width: 48px; background: transparent; color: var(--muted); }
.main { padding-inline: 24px; }
.share-card { width: min(470px, calc(100vw - 80px)); min-height: 337px; }
.tabs button { padding-block: 12px; }
.channel-head h1 { font-size: 36px; }
.yt-header .icon-button { background: transparent; }
.yt-header .voice { background: #f2f2f2; }
.playable-player video { width: 100%; height: 100%; object-fit: cover; }
.playlist-cover .control-explanation { color: #ddd; }
.empty { max-width: 701px; min-height: 101px; margin: -14px auto 0; padding: 24px 24px 8px; background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 2px 6px rgb(0 0 0 / 8%); display: block; text-align: center; }
.empty h1 { font-size: 20px; }
.empty .muted { margin: 8px 0 0; }
.history-gate { max-width: none; grid-template-columns: minmax(0, 1fr) 369px; }
.history-actions { border: 0; padding: 18px 0 0; gap: 24px; order: 2; }
.history-actions button { min-height: 32px; display: flex; align-items: center; gap: 12px; }
.history-actions .history-action-icon { width: 24px; height: 24px; flex: 0 0 24px; }
.history-message { display: grid; justify-items: center; align-content: start; min-height: 460px; padding-top: 120px; text-align: center; transform: translateX(-21.5px); }
.history-empty-icon { width: 88px; height: 88px; fill: currentColor; margin-bottom: 34px; }
.history-message h1 { margin: 0 0 8px; }
.history-message .signin { margin-top: 18px; }
.header-validation { margin: 0; min-height: 0; }
.tablist { display: flex; gap: 8px; min-width: 0; }
.filter-scroll-controls { display: flex; gap: 4px; }
.filter-scroll-controls button { border-radius: 50%; min-width: 32px; height: 32px; font-size: 0; }
.filter-scroll-controls button::after { font-size: 14px; }
.filter-scroll-controls [data-action="scroll-previous"]::after { content: '‹'; }
.filter-scroll-controls [data-action="scroll-next"]::after { content: '›'; }
.playlist-row { position: relative; }
.playlist-row .overflow { position: static; }
.yt-header { position: sticky; }
.yt-header #appearance-menu { position: absolute; right: 70px; top: 52px; z-index: 40; }
.guide-more, .guide-signin { margin: 8px 12px 0; width: calc(100% - 24px); text-align: left; padding: 8px 12px; border-radius: 8px; }
.playable-player .player-controls { min-height: 56px; }
.playable-player .player-controls input[type="range"] { width: min(42vw, 340px); accent-color: #f03; }
.playable-player { max-width: 996px; }
.playable-player.fixture-theater { max-width: none; }
.yt-layout:has(.watch-layout) { display: block; }
.yt-layout:has(.watch-layout) .guide { display: none; }
.main:has(.watch-layout) { padding: 11px 15px 64px; }
.watch-layout { max-width: none; grid-template-columns: minmax(0, 998px) minmax(0, 1fr); gap: 15px; }
.watch-layout .player { max-width: none; }
.player[data-state="unavailable"] { background: radial-gradient(circle at 62% 50%, #211033 0, #0f0f0f 44%); }
.watch-layout .unavailable { top: 248px; left: 120px; width: 420px; text-align: left; }
.watch-layout .unavailable h1 { margin: 0 0 12px; font-size: 24px; line-height: 28px; font-weight: 700; }
.watch-layout .unavailable p { margin: 0; }
.watch-layout .related { gap: 8px; align-content: start; grid-auto-rows: max-content; }
.watch-layout .related h2 { display: none; }
.watch-layout .small-card { grid-template-columns: 248px minmax(0, 1fr); gap: 12px; }
.watch-layout .small-card strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.watch-main > .control-explanation { display: none; }
.watch-main .watch-title { margin-top: 19px; }
.watch-main .watch-title { font-size: 20px; line-height: 28px; font-weight: 700; }
.watch-main { display: grid; grid-template-columns: 577px minmax(0, 1fr); column-gap: 16px; align-self: start; align-content: start; }
.watch-main > .player, .watch-main > .watch-title, .watch-main > .muted, .watch-main > .metadata-description { grid-column: 1 / -1; }
.watch-main > .channel-line, .watch-main > .actions { margin: 3px 0; }
.watch-main > .actions { justify-self: start; }
.watch-main > .metadata-description { margin-top: 4px; padding: 12px; border-radius: 12px; background: #f2f2f2; }
.watch-main > .metadata-description p { margin: 0 0 8px; }
.watch-layout .watch-main > .muted { display: none; }
.main > .note { display: none; }
.status > .control-explanation { display: none; }
.history-actions button { color: var(--ink); background: transparent; font-size: 14px; font-weight: 500; white-space: nowrap; padding: 0; }
.share-targets { display: flex; gap: 12px; overflow-x: auto; padding: 4px 20px 8px 0; scrollbar-color: var(--muted) transparent; scroll-snap-type: x proximity; }
.share-targets::after { content: '›'; align-self: start; display: grid; place-items: center; flex: 0 0 28px; height: 60px; border-radius: 50%; background: var(--chip); color: var(--ink); font-size: 24px; pointer-events: none; }
.share-targets button { display: grid; grid-template-rows: 60px auto; justify-items: center; gap: 2px; flex: 0 0 68px; padding: 0; background: transparent; color: var(--ink); font-size: 11px; line-height: 12px; text-align: center; scroll-snap-align: start; }
.share-targets button .control-icon { width: 60px; height: 60px; padding: 14px; border-radius: 50%; background: var(--chip); }
.local-player-states { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.local-player-states [data-part="live-indicator"] { font-weight: 700; }
.player[data-state="unavailable"] .player-video { display: none; }
.live-badge { background: #c00; font-weight: 700; }
.result h2 { overflow-wrap: anywhere; }
.result .meta { overflow-wrap: anywhere; word-break: break-word; }
.robustness-fixtures { margin-top: 40px; }
.robustness-fixtures .placeholder { display: grid; place-items: center; background: #d8d8d8; color: #202020; padding: 16px; text-align: center; }
.robustness-fixtures .missing-thumb { background: #e5e5e5; }
.short-overlay { background: rgb(0 0 0 / 78%); border-radius: 8px; padding: 8px; text-shadow: none; }
html[data-theme="dark"] { color-scheme: dark; --bg: #0f0f0f; --ink: #f1f1f1; --muted: #aaa; --chip: #272727; --hover: #3f3f3f; --line: #3f3f3f; }
html[data-theme="dark"] .yt-header, html[data-theme="dark"] .filters, html[data-theme="dark"] .tabs button, html[data-theme="dark"] .signin, html[data-theme="dark"] .overflow, html[data-theme="dark"] .filters-panel, html[data-theme="dark"] .popover, html[data-theme="dark"] .share-card { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .empty, html[data-theme="dark"] .note, html[data-theme="dark"] .premium-card { background: #272727; color: var(--ink); }
html[data-theme="dark"] .watch-main > .metadata-description { background: #272727; color: var(--ink); }
html[data-theme="dark"] .watch-main > .metadata-description button { background: transparent; color: var(--ink); }
html[data-theme="dark"] .yt-header .control-icon, html[data-theme="dark"] .guide .control-icon, html[data-theme="dark"] .actions .control-icon, html[data-theme="dark"] .share-card .icon-button .control-icon { filter: invert(1); }
html[data-theme="dark"] .history-empty-icon, html[data-theme="dark"] .history-action-icon { filter: invert(1); }
html[data-theme="dark"] .yt-header .voice { background: var(--chip); }

@media (max-width: 900px) {
  .watch-layout { grid-template-columns: 1fr; gap: 0; }
  .watch-main { display: block; }
  .watch-main > .channel-line, .watch-main > .actions { margin: 12px 0; }
}

@media (max-width: 560px) {
  .main { padding-top: 7px; padding-inline: 24px; }
  .empty { width: calc(100% + 8px); min-height: 120px; margin: 17px -4px 0; padding: 24px 24px 8px; }
  .history-gate { display: flex; flex-direction: column; gap: 0; }
  .history-actions { width: 182px; margin: 0 auto; padding-top: 27px; gap: 24px; order: 0; }
  .history-actions { width: max-content; }
  .history-message { min-height: 0; padding-top: 143px; transform: none; justify-items: start; text-align: left; }
  .history-message .history-empty-icon { justify-self: center; }
  .history-message h1 { width: 200px; font-size: 20px; line-height: 28px; }
  .history-message h1, .history-message .muted { margin-left: 80px; }
  .history-message .signin { justify-self: center; }
  .main:has(.playable-player) { padding-inline: 0; }
  .main:has(.watch-layout) { padding: 0 0 64px; }
  .yt-layout:has(.watch-layout) .guide { display: none; }
  .watch-layout .player { aspect-ratio: 390 / 241; }
  .watch-layout .unavailable { top: 82px; left: 48px; width: 294px; }
  .watch-layout .unavailable h1 { font-size: 20px; line-height: 28px; }
  .watch-main > .metadata-description { margin-top: 12px; }
  .searchbox { display: flex; flex: 0 0 24px; width: 24px; overflow: visible; border: 0; }
  .searchbox input { display: none; }
  .searchbox #clear-query { display: none; }
  .searchbox button { width: 24px; height: 24px; min-width: 24px; padding: 0; display: grid; place-items: center; align-self: center; border: 0; border-radius: 50%; }
  .searchbox.compact-open { flex: 1 1 auto; border: 1px solid #ccc; }
  .searchbox.compact-open input { display: block; }
  .chip-row { align-items: flex-start; flex-wrap: wrap; overflow: visible; }
  .chip-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding-bottom: 20px; }
  .tablist { flex: initial; flex-wrap: nowrap; max-inline-size: 100%; overflow: hidden; }
  .tablist .chip:nth-child(n + 4) { display: none; }
  .tablist .chip { max-inline-size: 100%; overflow-wrap: anywhere; }
  .filter-scroll-controls { display: none; }
  .filters { width: 32px; height: 32px; padding: 4px; font-size: 0; }
  .filters .control-icon { width: 20px; height: 20px; }
  .status > .control-explanation { display: none; }
  .status > #filter-status { margin: 7px 0 0; }
  .filters { flex: 0 0 auto; margin-left: auto; }
  .result { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; }
  .result .thumb { margin-bottom: 0; }
  .result h2, .result .muted { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; }
  .result h2 { -webkit-line-clamp: 2; }
  .result .muted { -webkit-line-clamp: 2; }
  .channel-head h1 { font-size: 24px; }
  .share-card { width: min(310px, calc(100vw - 80px)); }
  .channel-head { flex-wrap: wrap; }
  .channel-head > div { flex: 1 1 180px; min-width: 0; }
  .channel-head .subscribe { margin-inline: auto 0; }
  .tabs { height: 48px; flex-wrap: nowrap; gap: 16px; overflow: auto; }
}

@media (min-width: 900px) {
  .empty { max-width: 701px; min-height: 101px; margin: 0 auto; padding: 24px 24px 8px; background: #fff; border-radius: 12px; }
}