/* ca7's warm monochrome palette overrides shared semantic colors locally.
   Keep the pinned Margin 7 fonts, spacing and generated token source intact. */
.m7[data-m7-theme="dark"] {
  --m7-bg: var(--m7-color-charcoal);
  --m7-surface: #242423;
  --m7-raised: #2c2b28;
  --m7-text: var(--m7-color-porcelain);
  --m7-muted: #bdb7aa;
  --m7-subtle: #aaa396;
  --m7-line: #3d3b35;
  --m7-control-border: #8c867a;
  --m7-accent: var(--m7-color-riso-paper);
  --m7-action: var(--m7-color-riso-paper);
  --m7-action-text: var(--m7-color-charcoal);
  --m7-action-hover: var(--m7-color-riso-pale);
  --m7-focus: var(--m7-color-riso-paper);
  --m7-info: var(--m7-color-riso-paper);
  --m7-selection: #39362f;
}
.m7[data-m7-theme="light"] {
  --m7-text: var(--m7-color-charcoal);
  --m7-muted: #625d53;
  --m7-subtle: #686156;
  --m7-line: #d8d0c4;
  --m7-control-border: #898173;
  --m7-accent: var(--m7-color-charcoal);
  --m7-action: var(--m7-color-charcoal);
  --m7-action-hover: #3d3932;
  --m7-focus: #5f594e;
  --m7-info: var(--m7-color-charcoal);
  --m7-selection: #e5ddcf;
}
html { scroll-padding-top: var(--ca7-sticky-height, 96px); }
.site-header, .trail-shell, #main { max-width: none; }
.sticky-header { --ca7-dock-motion: 360ms cubic-bezier(.2, 0, 0, 1); position: sticky; top: 0; z-index: 20; background: var(--m7-bg); }
.site-header { position: relative; z-index: 20; display: flex; align-items: center; gap: var(--m7-space-32); min-height: var(--m7-space-96); background: var(--m7-bg); border-bottom: 1px solid var(--m7-line); }
.brand { color: var(--m7-text); text-decoration: none; align-items: center; gap: var(--m7-space-12); font: 400 2rem var(--m7-font-heading); letter-spacing: -.065em; display: inline-flex; flex: 0 0 auto; padding-block: var(--m7-space-16); }
.brand-mark { display: block; flex: 0 0 auto; width: 44px; height: 30px; }
.brand:hover { text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.header-search { position: relative; flex: 1; max-width: 420px; min-width: 0; margin-inline: auto; }
.header-search input { padding-left: var(--m7-space-40); border: 0; border-bottom: 1px solid var(--m7-control-border); border-radius: 0; background: transparent; font-size: .875rem; letter-spacing: .02em; }
.search-icon { position: absolute; left: var(--m7-space-12); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; pointer-events: none; color: var(--m7-muted); }
.header-actions { display: flex; gap: var(--m7-space-8); flex: 0 0 auto; }
#debug-toggle[aria-pressed="true"] { background: var(--m7-selection); }
.icon-button { width: 44px; min-width: 44px; padding: var(--m7-space-8); font-size: 1.25rem; }
.icon-button svg { width: 22px; height: 22px; }
.icon-button svg, .search-icon { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[data-m7-theme="dark"] .moon-icon, [data-m7-theme="light"] .sun-icon { display: none; }
.settings-menu { position: relative; }
.account-menu { position: relative; }
.account-panel { right: -104px; width: 320px; max-width: calc(100vw - 40px); }
.account-panel h2 { margin: 0 0 var(--m7-space-8); font: 400 1rem var(--m7-font-body); overflow-wrap: anywhere; }
.account-panel p { margin: var(--m7-space-8) 0; color: var(--m7-muted); font-size: .75rem; line-height: 1.5; }
.account-panel p:empty { display: none; }
.account-modes { display: flex; gap: var(--m7-space-8); margin-block: var(--m7-space-12); border-bottom: 1px solid var(--m7-line); }
.account-modes .m7-button { padding-inline: var(--m7-space-8); font-size: .8125rem; color: var(--m7-muted); }
.account-modes [aria-pressed="true"] { color: var(--m7-text); box-shadow: inset 0 -1px var(--m7-accent); }
.account-panel label { display: block; margin-block: var(--m7-space-12) var(--m7-space-4); font-size: .75rem; }
.account-panel .m7-input { font-size: .875rem; border-radius: 0; }
#account-submit { width: 100%; margin-top: var(--m7-space-16); }
#account-error { color: var(--m7-text); }
#account-status { font-size: .6875rem; }
#account-toggle.signed-in { color: var(--m7-accent); }
.trail-notice { display: flex; align-items: center; justify-content: space-between; gap: var(--m7-space-16); margin-bottom: var(--m7-space-16); font-size: .8125rem; }
.floating-panel { position: absolute; top: calc(100% + var(--m7-space-12)); padding: var(--m7-space-16); background: var(--m7-surface); color: var(--m7-text); border: 1px solid var(--m7-control-border); border-radius: 0; box-shadow: 0 12px 32px rgb(0 0 0 / .1); }
.site-header .m7-button, .site-header select { border-radius: 0; }
.settings-panel { right: 0; width: 320px; max-width: calc(100vw - 40px); max-height: calc(100svh - 110px); overflow-y: auto; overscroll-behavior: contain; }
.settings-panel .m7-choice { font-size: .875rem; }
.settings-debug { width: 100%; justify-content: flex-start; gap: var(--m7-space-8); padding-inline: var(--m7-space-8); font-size: .875rem; }
.settings-debug svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#debug-status { margin-left: auto; color: var(--m7-muted); font-size: .75rem; }
.cover-finish, .animation-settings { min-width: 0; margin: var(--m7-space-16) 0 0; padding: var(--m7-space-12) 0 0; border: 0; border-top: 1px solid var(--m7-line); }
.cover-finish legend, .animation-settings legend { padding: 0 var(--m7-space-8) 0 0; font-size: .8125rem; }
.animation-settings label { display: block; margin-block: var(--m7-space-8) var(--m7-space-4); font-size: .8125rem; }
.animation-settings .m7-input { border-radius: 0; font-size: .8125rem; }
.animation-settings .m7-button { width: 100%; margin-top: var(--m7-space-12); font-size: .8125rem; }
.animation-settings p { margin-bottom: 0; color: var(--m7-muted); font-size: .75rem; }
.cover-finish p { margin: 0 0 var(--m7-space-8); font-size: .75rem; color: var(--m7-muted); line-height: 1.5; }
.cover-finish .m7-choice { min-height: 48px; margin: 0; cursor: pointer; }
.cover-finish small { display: block; color: var(--m7-muted); font-size: .6875rem; line-height: 1.5; }
.deep-cuts-control { display: flex; align-items: center; gap: var(--m7-space-8); flex: 0 0 auto; color: var(--m7-muted); }
.deep-cuts-control label { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.deep-cuts-control output { min-width: 3ch; font-size: .6875rem; font-variant-numeric: tabular-nums; text-align: right; }
.deep-cuts-control input { appearance: none; width: 88px; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; }
.deep-cuts-control input::-webkit-slider-runnable-track { height: 1px; background: var(--m7-control-border); }
.deep-cuts-control input::-moz-range-track { height: 1px; background: var(--m7-control-border); }
.deep-cuts-control input::-webkit-slider-thumb { appearance: none; width: 9px; height: 9px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--m7-accent); }
.deep-cuts-control input::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--m7-accent); }
.search-panel { inset-inline: 0; }
#search-back { font-size: .8125rem; padding-inline: var(--m7-space-8); margin-bottom: var(--m7-space-8); }
#search-state:not(:empty):not(.sr-only) { margin-block: var(--m7-space-12) var(--m7-space-4); }
.search-results { max-height: min(440px, 55svh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--m7-control-border) transparent; }
.search-group + .search-group { margin-top: var(--m7-space-20); }
.search-heading { margin: 0; padding: var(--m7-space-8); color: var(--m7-muted); font: 400 .6875rem/1.5 var(--m7-font-body); letter-spacing: .08em; text-transform: uppercase; overflow-wrap: anywhere; }
.search-group ul { list-style: none; margin: 0; padding: 0; }
.search-empty { margin: 0; padding: var(--m7-space-8); font-size: .8125rem; }
.search-track { display: flex; align-items: center; gap: var(--m7-space-12); width: 100%; min-height: 64px; padding: var(--m7-space-8); text-align: left; border: 0; border-bottom: 1px solid var(--m7-line); background: transparent; color: var(--m7-text); cursor: pointer; border-radius: 0; transition: background var(--m7-motion-fast) var(--m7-motion-ease); }
.mini-thumbnail { position: relative; display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; overflow: hidden; background: var(--m7-raised); color: var(--m7-accent); }
.mini-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.333334); }
.search-artist-arrow { color: var(--m7-muted); font-size: 1.25rem; }
.search-track:hover, .search-track:focus-visible { background: var(--m7-selection); }
.search-track:focus-visible { outline-offset: -3px; }
.search-track-row { display: flex; align-items: center; border-bottom: 1px solid var(--m7-line); transition: background var(--m7-motion-fast) var(--m7-motion-ease); }
.search-track-row:hover { background: var(--m7-selection); }
.search-track-row .search-track { flex: 1; min-width: 0; border-bottom: 0; }
.search-track-row .search-play-next { position: static; flex: 0 0 44px; margin-right: var(--m7-space-8); color: var(--m7-text); mix-blend-mode: normal; }
.search-track-row:hover .search-play-next, .search-track:focus-visible + .search-play-next, .search-play-next:focus-visible { opacity: 1; pointer-events: auto; }
.track-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.track-copy strong { font-size: .875rem; line-height: 1.45; font-weight: 500; overflow-wrap: anywhere; }
.track-copy small { font-size: .8125rem; color: var(--m7-muted); line-height: 1.5; margin-top: 2px; }
.workspace { padding-block: var(--m7-space-16) var(--m7-space-64); }
.session-panel { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--m7-line); }
/* A short veil lets artwork recede under the sticky trail. It sits above the
   persistent player too, without changing layout or intercepting controls. */
.session-panel::after { content: ''; position: absolute; top: 100%; inset-inline: 0; height: var(--m7-space-12); z-index: 2; background: linear-gradient(to bottom, var(--m7-bg), transparent); opacity: .35; pointer-events: none; }
.trail-content { --ca7-trail-preview-height: 88px; display: flex; align-items: center; gap: var(--m7-space-20); min-width: 0; flex: 1; height: 88px; }
.trail-player { display: block; flex: 0 0 var(--ca7-trail-preview-width, 176px); width: var(--ca7-trail-preview-width, 176px); height: var(--ca7-trail-preview-height); padding: 0; border: 0; border-radius: 0; background: var(--m7-raised); cursor: pointer; }
.trail-player .mini-thumbnail { width: 100%; height: 100%; }
.trail-player.is-docked .mini-thumbnail { visibility: hidden; }
.trail-player:focus-visible { outline-offset: 2px; }
/* Clip the persistent video to the page below the header plus its exact dock
   opening. The rest of the sticky trail can never be covered by the player. */
.player-layer { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.section-heading { display: flex; align-items: center; gap: var(--m7-space-8); flex: 0 0 auto; }
.section-heading h2 { font-size: .8125rem; font-weight: 400; color: var(--m7-muted); }
.trail-count { color: var(--m7-accent); font-size: .75rem; font-variant-numeric: tabular-nums; }
#history { display: flex; align-items: center; gap: var(--m7-space-12); flex: 1; min-width: 0; height: var(--ca7-trail-preview-height); list-style: none; padding: 0 var(--m7-space-4); margin: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--m7-control-border) transparent; }
#history li { display: flex; align-items: center; gap: var(--m7-space-8); flex: 0 0 auto; max-width: 260px; padding-left: var(--m7-space-12); border-left: 1px solid var(--m7-line); }
#history li.current-listen { max-width: 420px; }
#history .track-copy strong, #history .track-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-number { color: var(--m7-subtle); font-size: .75rem; font-variant-numeric: tabular-nums; }
.history-transport { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--m7-text); cursor: pointer; }
.history-transport:disabled { cursor: default; }
.history-transport > * { grid-area: 1 / 1; }
.history-transport svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.history-transport .playback-pause { stroke-width: 2.6; }
.history-number, .history-transport svg { transition: opacity var(--m7-motion-fast) var(--m7-motion-ease); }
.history-play, .playback-pause { opacity: 0; }
.history-replay:hover .history-number, .history-replay:focus-visible .history-number { opacity: 0; }
.history-replay:hover .history-play, .history-replay:focus-visible .history-play { opacity: 1; }
.playback-meter[data-state="active"] .playback-pause { opacity: 1; }
.playback-meter[data-state="paused"] .history-play, .playback-meter[data-state="ready"] .history-play { opacity: 1; }
.history-actions { display: flex; gap: var(--m7-space-4); flex: 0 0 auto; }
.history-actions .m7-button { font-size: .8125rem; padding-inline: var(--m7-space-12); }
.recommendations { min-width: 0; }
#rec-state:not(:empty), #playback-notice, #error, #retry-recommendations { margin-bottom: var(--m7-space-16); }
.media-grid { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 0; row-gap: var(--m7-space-32); align-items: start; overflow-anchor: none; }
#recommendations { display: contents; }
.recommendation-outgoing { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.recommendation-outgoing .track-card { position: absolute; pointer-events: none; }
.track-card { position: relative; isolation: isolate; min-width: 0; background: transparent; border-radius: 0; transition: opacity var(--m7-motion-fast) var(--m7-motion-ease); }
.track-card.is-next { z-index: 1; }
.card-action { position: absolute; top: var(--m7-space-4); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--m7-color-porcelain); mix-blend-mode: difference; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity var(--m7-motion-fast) var(--m7-motion-ease); }
.play-next { right: var(--m7-space-4); }
.remove-recommendation { left: var(--m7-space-4); }
.card-action { --ca7-mixed-artwork-ink: #d6493f; }
.card-action svg { position: relative; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card-action[data-contrast] { mix-blend-mode: normal; }
.card-action[data-contrast="dark"] { color: var(--m7-color-charcoal); }
.card-action[data-contrast="mixed"] { color: var(--ca7-mixed-artwork-ink); }
.play-next[aria-pressed="true"] svg { fill: currentColor; }
.track-card:hover .card-action, .card-action:focus-visible { opacity: 1; pointer-events: auto; }
/* Two columns wide, one square cover tall: captions align with adjacent tracks.
   YouTube fits the video inside this frame without cropping its controls. */
#now-playing.has-player { grid-column: span 2; }
/* The slot reserves the video's footprint. The iframe stays in player-layer;
   only its fixed coordinates change, avoiding a reload when docking. */
.video-slot { width: 100%; aspect-ratio: 2; min-height: 200px; background: var(--m7-raised); }
.video-display { position: absolute; top: 0; left: 0; transform-origin: top left; overflow: hidden; background: var(--m7-raised); pointer-events: auto; }
.video-display.is-morphing { transition: transform var(--ca7-dock-motion); }
.video-display.is-docked { pointer-events: none; }
.video-display iframe { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-transition { position: absolute; inset: 0; z-index: 1; background: var(--m7-raised) center / cover no-repeat; pointer-events: none; }
.thumbnail { display: block; width: 100%; padding: 0; border: 0; text-align: left; background: transparent; color: var(--m7-text); cursor: pointer; }
.thumbnail-image { display: block; position: relative; aspect-ratio: 1; overflow: hidden; background: var(--m7-raised); }
.track-diagnostics { display: none; position: absolute; left: var(--m7-space-8); bottom: var(--m7-space-8); width: max-content; max-width: calc(100% - 16px); flex-wrap: wrap; gap: 2px 8px; padding: 3px 6px; background: var(--m7-bg); color: var(--m7-text); font: 400 .6875rem/1.4 var(--m7-font-body); font-variant-numeric: tabular-nums; pointer-events: none; }
.track-diagnostics span { white-space: nowrap; }
.debug-mode .track-diagnostics { display: flex; }
/* hqdefault is 4:3 with a 16:9 image inside. Center-crop that image to a square,
   removing both the thumbnail's letterbox and the common album-cover sidebars. */
.thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.333334); }
.thumbnail .recommendation-cover { opacity: 0; transition: opacity 120ms var(--m7-motion-ease); }
.thumbnail .recommendation-cover.is-loaded { opacity: 1; }
/* Temporary cover comparisons. Only artwork is treated: the first trail entry,
   restored/current player, transition poster, captions and controls stay clean.
   A small repeating SVG keeps the grain still and avoids per-card canvas work. */
[data-cover-finish="grain"] { --ca7-cover-filter: saturate(.78) contrast(.96) sepia(.06); --ca7-cover-grain: .10; }
[data-cover-finish="print"] { --ca7-cover-filter: saturate(.70) sepia(.23) contrast(.94) brightness(1.02); --ca7-cover-grain: .16; }
[data-cover-finish="film"] { --ca7-cover-filter: saturate(.56) contrast(.86) brightness(1.06) sepia(.08); --ca7-cover-grain: .13; }
/* Stronger neutral grain and lower brightness retain the artwork's color. */
[data-cover-finish="rich"] { --ca7-cover-filter: saturate(1.10) contrast(1.02) brightness(.84); --ca7-cover-grain: .28; }
[data-cover-finish="deep"] { --ca7-cover-filter: saturate(1.18) contrast(1.04) brightness(.72); --ca7-cover-grain: .38; }
:is(#recommendations .thumbnail-image, #history li:not(:first-child) .mini-thumbnail) { isolation: isolate; }
:is(#recommendations .thumbnail-image, #history li:not(:first-child) .mini-thumbnail) img { filter: var(--ca7-cover-filter, none); }
:is(#recommendations .thumbnail-image, #history li:not(:first-child) .mini-thumbnail)::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: url('/static/cover-grain.svg') repeat; background-size: 160px 160px; mix-blend-mode: soft-light; opacity: var(--ca7-cover-grain, 0); }
.track-diagnostics { z-index: 2; }
.thumbnail:focus-visible { outline-offset: -3px; }
.track-caption { display: block; padding: var(--m7-space-12) var(--m7-space-24) 0 0; font: 400 .9375rem/1.45 var(--m7-font-body); letter-spacing: .018em; overflow-wrap: anywhere; }
.track-title { color: var(--m7-text); }
.track-artist { color: var(--m7-muted); }
.thumbnail:hover .track-title { color: var(--m7-accent); }
.thumbnail-placeholder { display: grid; place-items: center; position: absolute; inset: 0; font-size: 3rem; color: var(--m7-accent); }
.video-status { display: grid; place-items: center; position: absolute; inset: 0; padding: var(--m7-space-20); text-align: center; color: var(--m7-muted); font-size: .8125rem; }
@media (max-width: 1100px) { .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) {
  .site-header { gap: var(--m7-space-20); }
  .trail-content { --ca7-trail-preview-height: 72px; height: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--m7-space-8); padding-block: var(--m7-space-16); }
  #history li.current-listen { max-width: min(420px, calc(100vw - 40px)); }
  .section-heading { grid-column: 1 / -1; }
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #now-playing.has-player { grid-column: 1 / -1; }
  .video-slot { aspect-ratio: 16 / 9; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .video-display.is-morphing { transition: none; }
  .thumbnail .recommendation-cover { transition: none; }
  .history-number, .history-transport svg { transition: none; }
}
@media (max-width: 900px) {
  .site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--m7-space-8) var(--m7-space-20); padding-block: var(--m7-space-12); }
  .brand { padding: 0; }
  .header-actions { grid-column: 2; grid-row: 1; }
  .header-search { grid-column: 1; grid-row: 2; width: 100%; max-width: none; }
  .deep-cuts-control { grid-column: 2; grid-row: 2; justify-content: flex-end; }
}
@media (max-width: 540px) {
  .site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--m7-space-12); padding-block: var(--m7-space-12); }
  .brand { padding: 0; }
  .header-search { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .header-actions { grid-column: 2; grid-row: 1; }
  .deep-cuts-control { grid-column: 1 / -1; grid-row: 3; }
  .deep-cuts-control input { flex: 1; }
  .account-panel { max-height: calc(100svh - 110px); overflow-y: auto; }
  .search-panel { padding: var(--m7-space-12); }
  .settings-panel { z-index: 1; }
  .session-panel .section-heading { grid-column: 1; grid-row: 1; }
  .history-actions { grid-column: 2; grid-row: 1; }
  #history { grid-column: 1 / -1; grid-row: 2; }
  .media-grid { row-gap: var(--m7-space-24); }
  .track-caption { padding-right: var(--m7-space-12); font-size: .8125rem; }
}
@media (max-width: 380px) {
  .site-header { column-gap: var(--m7-space-8); }
  .header-actions { gap: 0; }
  .brand { font-size: 1.875rem; }
  .brand { gap: var(--m7-space-8); }
  .brand-mark { width: 36px; height: auto; }
  .account-panel { right: -88px; }
}