/* Crate view: pairs as stacked sleeves in a box; the pulled pair sits on a stage above. */
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.view-toggle button { width: 48px; min-height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--muted); }
.view-toggle button svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.view-toggle button:hover:not([aria-pressed="true"]) { background: #e9e8de; color: var(--ink); }
.view-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper-light); }

.stage { min-height: 300px; margin: 8px 0 20px; padding: 20px 16px; border: 1px dashed var(--line); text-align: center; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--muted); }
.stage:empty { display: none; }
.stage.has-pair { border-style: solid; background: var(--paper-light); animation: stage-in .35s cubic-bezier(.25,1,.5,1) both; }
@keyframes stage-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.stage h3 { margin: 0; font: 400 clamp(22px,5vw,32px)/1.1 var(--display); color: var(--ink); }
.stage p { margin: 0; font-size: 14px; }
.stage-cta { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: 194px; min-height: 48px; margin-top: 3px; padding: 0 18px 0 22px; border: 1px solid #803a28; border-radius: 999px; background: var(--rust); color: #fff8e8; font: 700 13px/1 var(--ui); letter-spacing: .025em; box-shadow: 0 3px 0 #713321; transition: transform .18s ease-out,background-color .18s ease-out,box-shadow .18s ease-out; }
.stage-cta:hover { transform: translateY(-2px); background: #873c28; box-shadow: 0 5px 0 #713321; }
.stage-cta:active { transform: translateY(1px); box-shadow: 0 1px 0 #713321; }
.stage-cta:focus-visible { outline: 2px solid var(--rust); outline-offset: 4px; }
.stage-cta-arrow { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #fff8e87a; border-radius: 50%; font-size: 15px; transition: transform .18s ease-out; }
.stage-cta:hover .stage-cta-arrow { transform: translate(1px,-1px); }
.stage-open { display: flex; align-items: center; justify-content: center; gap: clamp(6px,2vw,20px); padding: 0; border: 0; background: transparent; width: 100%; }
.stage-open .sleeve { width: min(34vw, 230px); }
.stage-open .sleeve.a { transform: rotate(-2deg); }
.stage-open .sleeve.b { transform: rotate(2deg); }
.stage-open:hover .sleeve.a, .stage-open:focus-visible .sleeve.a { transform: translateX(-8px) rotate(-3deg); }
.stage-open:hover .sleeve.b, .stage-open:focus-visible .sleeve.b { transform: translateX(8px) rotate(3deg); }
.stage-x { color: var(--rust); font-size: 22px; }

.sleeve { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 3px; box-shadow: 0 6px 16px #1c1a1455; transition: transform .3s cubic-bezier(.25,1,.5,1); background: hsl(var(--h) 26% 30%); }
.sleeve-fallback { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; padding: 8px; color: #f3e9d2; text-align: center; font: 600 clamp(22px,7vw,40px)/1 var(--display); }
.sleeve-fallback small { font: 500 clamp(9px,2.4vw,12px)/1.2 var(--ui); opacity: .75; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sleeve img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.crate { position: relative; margin: 40px -16px 0; padding: 10px 0 0; background: #3a2c1f; border-radius: 6px 6px 0 0; }
.crate-strip { display: flex; gap: 10px; overflow-x: auto; padding: 26px 16px 18px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.crate-card-item { flex: 0 0 clamp(150px,44vw,190px); scroll-snap-align: start; list-style: none; }
.crate-card { display: grid; width: 100%; gap: 6px; padding: 0 0 8px; border: 0; background: transparent; color: #f3e9d2; text-align: left; transition: transform .3s cubic-bezier(.25,1,.5,1); }
.crate-card .sleeves { position: relative; display: block; aspect-ratio: 1; }
.crate-card .sleeve.b { position: absolute; right: 0; bottom: 0; width: 80%; transform: rotate(3deg); }
.crate-card .sleeve.a { width: 80%; }
.crate-card:hover, .crate-card:focus-visible { transform: translateY(-8px); }
.crate-card[aria-pressed="true"] { transform: translateY(-14px); }
.crate-card[aria-pressed="true"] .sleeve { box-shadow: 0 0 0 2px #e8b67d, 0 8px 18px #0008; }
.crate-names { font-size: 13px; line-height: 1.25; }
.crate-score { color: #e8b67d; font-size: 12px; }
.crate::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(#5a4430, #46341f); border-top: 2px solid #7a5c3c; pointer-events: none; }
.crate-strip { padding-bottom: 34px; }
@media (min-width: 900px) { .crate { margin: 48px 0 0; } .crate-card-item { flex-basis: 200px; } }
@media (prefers-reduced-motion: reduce) { .stage.has-pair { animation: none; } .sleeve, .crate-card, .stage-cta,.stage-cta-arrow { transition: none; } }

/* Facet shelf: dividers that re-file the crate by decade, instrument or musician. */
.shelf { margin: 0 0 4px; }
.shelf-tools { display: flex; min-height: 48px; align-items: center; justify-content: flex-start; gap: 8px; position: relative; padding: 0 16px; }
.crate-tools-label { margin-right: auto; color: #d9c29a; font: 600 10px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.shelf-toggle { position: relative; width: 44px; height: 44px; margin: 0; display: grid; flex: 0 0 44px; place-items: center; border: 1px solid #7a5c3c; border-radius: 4px; background: transparent; color: #e8b67d; cursor: pointer; }
.shelf-toggle:hover,.shelf-toggle[aria-expanded="true"] { background: #5a4430; }
.shelf-toggle.has-pick::after { content: ""; position: absolute; width: 6px; height: 6px; right: 5px; top: 5px; border-radius: 50%; background: #e8b67d; }
.shelf-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.crate-options[hidden],.sort-options[hidden] { display: none; }
.crate-options,.sort-options { position: absolute; z-index: 3; top: 46px; left: 16px; border: 1px solid #7a5c3c; border-radius: 4px; background: #f4f1e8; color: var(--ink); box-shadow: 0 12px 28px #1a120d66; }
.crate-options { width: min(360px, calc(100vw - 48px)); padding: 16px 18px 3px; }
.crate-options-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.crate-options-head strong { font: 600 16px/1.2 var(--display); }
.clear-filters { border: 0; background: transparent; color: var(--rust); font: 600 11px/1 var(--ui); text-decoration: underline; cursor: pointer; }
.crate-options .shelf-kinds { padding: 0 0 12px; }
.crate-options .shelf-kinds button { border-color: #cacabe; background: #fbf9f2; color: #3d4238; }
.crate-options .shelf-kinds button[aria-pressed="true"] { border-color: var(--rust); background: var(--rust); color: #fff8eb; }
.crate-options .shelf-chips { padding: 0 0 12px; }
.crate-options .shelf-chip { min-height: 36px; border-radius: 3px; background: #e8e2d3; color: #3d4238; }
.crate-options .shelf-chip[aria-pressed="true"] { background: #a54d32; color: #fff8eb; }
.crate-result-settings { border-top: 1px solid #d6d4c9; padding-top: 14px; }
.result-setting { margin: 0 0 16px; }
.result-setting label { display: block; margin: 0 0 7px; color: #3d4238; font-size: 12px; font-weight: 700; }
.result-setting .range-label { margin-bottom: 6px; }
.result-setting input[type="range"] { width: 100%; margin: 6px 0 0; accent-color: var(--rust); cursor: pointer; }
.sort-options { width: min(252px, calc(100vw - 48px)); padding: 8px; }
.sort-options p { margin: 4px 9px 7px; color: #777c70; font: 700 10px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.sort-options button { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 11px; border: 0; border-radius: 3px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.sort-options button:hover,.sort-options button[aria-pressed="true"] { background: #e8e2d3; }
.sort-options button[aria-pressed="true"] span::after { content: " ✓"; color: var(--rust); }
.sort-options button span { font: 700 12px/1.2 var(--ui); }
.sort-options button small { color: #777c70; font: 400 10px/1.2 var(--ui); }
.shelf-kinds { display: flex; gap: 6px; padding: 0 16px 8px; }
.shelf-kinds button { min-height: 36px; padding: 0 12px; border: 1px solid #7a5c3c; border-radius: 999px; background: transparent; color: #d9c29a; font-size: 12px; }
.shelf-kinds button[aria-pressed="true"] { background: #d9c29a; color: #3a2c1f; }
.shelf-kinds button.has-pick:not([aria-pressed="true"]) { border-color: #e8b67d; color: #f3e9d2; }
.shelf-chips { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
.shelf-chips::-webkit-scrollbar { display: none; }
.shelf-chip { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 4px 4px 0 0; background: #5a4430; color: #f3e9d2; font-size: 13px; white-space: nowrap; }
.shelf-chip small { opacity: .65; font-size: 11px; }
.shelf-chip[aria-pressed="true"] { background: #e8b67d; color: #2b2015; }

/* Wrapped facet list, state bar, sort reset. */
.crate-options .shelf-chips { flex-wrap: wrap; overflow-x: visible; overflow-y: auto; max-height: 220px; }
.crate-options .shelf-chip { flex: none; min-height: 44px; padding: 0 10px; }
#facet-search { width: 100%; box-sizing: border-box; margin: 0 0 10px; min-height: 36px; padding: 0 10px; border: 1px solid #cacabe; border-radius: 3px; background: #fbf9f2; color: var(--ink); font: 13px var(--ui); }
#facet-search[hidden] { display: none; }
.sort-options .crate-options-head { margin: 4px 9px 7px; }
.sort-options .crate-options-head p { margin: 0; }
.crate-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 16px 4px; color: #d9c29a; font-size: 12px; }
.crate-state[hidden] { display: none; }
.state-tag { min-height: 28px; padding: 0 10px; border: 1px solid #e8b67d; border-radius: 999px; background: transparent; color: #f3e9d2; font-size: 12px; cursor: pointer; }
.state-tag:hover { background: #5a4430; }
.sort-options { left: 64px; }

/* Keep alignment details collapsed until a listener asks to inspect them. */
.paired-stat-top { display: flex; align-items: center; gap: 18px; }
.alignment-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0; border: 0; background: transparent; color: var(--rust); cursor: pointer; font: 700 12px var(--ui); white-space: nowrap; }
.alignment-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alignment-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.alignment-toggle:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
.alignment-score-cell { min-width: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 12px; padding-top: 16px; }
.alignment-panel { margin: 0 0 16px; padding: 22px clamp(16px,2.5vw,30px); border: 1px solid var(--line); background: var(--paper-light); }
.alignment-panel h3 { margin: 0 0 4px; font: 600 20px/1.2 var(--display); }
.alignment-panel > p { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.alignment-table-scroll { max-height: 340px; overflow: auto; }
.alignment-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; }
.alignment-table caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.alignment-table th,.alignment-table td { padding: 9px 12px; border-top: 1px solid var(--line); }
.alignment-table thead th { position: sticky; top: 0; z-index: 1; background: var(--paper); color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.alignment-table tbody th { width: 54px; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.alignment-table .alignment-gap td { background: #f2e5d8; color: #783e2d; }
@media(max-width:600px) { .pair-card-score { grid-template-columns: repeat(2,minmax(0,1fr)); } .pair-card-score>.paired-stat { grid-column: 1/-1; } .alignment-toggle { font-size: 11px; } .alignment-panel { padding: 14px 10px; } .alignment-table { min-width: 490px; } }
@media(max-width:400px) { .sort-options { left: 8px; } .crate-options,.sort-options { max-width: calc(100vw - 24px); } .shelf-kinds { flex-wrap: wrap; } }

.sort-options p,.sort-options button small{color:#555b50}