/* Reuse the library grid and card footer; only the palette itself is new. */
.palette-card{overflow:hidden;margin:0;min-width:0}
.palette-swatches{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));aspect-ratio:2 / 3;overflow:hidden;border-radius:7px 7px 0 0}
.palette-card .curtain-base{object-fit:contain}
/* A palette has four equal bands, so it can fill the portrait frame losslessly. */
.palette-card .curtain-overlay img{object-fit:fill}
@media(min-width:1280px){.paired-catalog{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* Match both static detail links and modal buttons, using the card's real width. */
.palette-card{container-type:inline-size;container-name:palette-card}
.palette-card .curtain-prompt{flex:0 0 auto;min-width:0}
.palette-card .row-prompt-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;min-height:44px;padding:8px;font-size:14px;line-height:20px;white-space:nowrap}
.palette-card .row-prompt-action svg{display:block;flex:none}
@container palette-card (max-width:300px){
 .palette-card .curtain-card-bar{padding-inline:8px;gap:4px}
 .palette-card .curtain-number{font-size:18px;flex:1 0 auto}
 .palette-card .favorite-button{width:36px;height:44px}
}
@container palette-card (max-width:229px){.palette-reference-label{display:none}}
.palette-swatch{display:flex;align-items:center;justify-content:flex-end;padding:0 14px;min-height:0;border:0;border-radius:0;background:var(--swatch);color:var(--swatch-ink);cursor:pointer}
.palette-swatch span{font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .15s}
.palette-swatch:hover span,.palette-swatch:focus-visible span{opacity:1}
.palette-swatch:focus-visible{outline:3px solid var(--swatch-ink);outline-offset:-4px}
.palette-card .curtain-number{margin-right:auto}
.palette-card .curtain-number a{color:inherit}
.palette-card .curtain-number a:hover{text-decoration:underline;text-underline-offset:4px}
@media(hover:none){.palette-swatch span{opacity:1}}
@media(prefers-reduced-motion:reduce){.palette-swatch span{transition:none}}

/* The same reference dialog, with uncropped portraits at their original ratio. */
#detail-dialog.color-detail{width:min(1040px,calc(100vw - 48px))}
#detail-dialog.color-detail .detail-content{display:grid;grid-template-rows:auto minmax(0,1fr) auto minmax(200px,.7fr) auto}
#detail-dialog.color-detail .detail-examples{grid-template-columns:repeat(3,minmax(0,1fr));min-height:0;height:100%;align-items:center;justify-items:center}
#detail-dialog.color-detail .detail-examples figure{aspect-ratio:2 / 3;width:auto;height:100%;max-width:100%}
#detail-dialog.color-detail .detail-examples img{object-fit:contain}
#detail-dialog.color-detail .palette-swatches{height:100%;border-radius:0}
#detail-dialog.color-detail .palette-swatch span{opacity:1}
.color-detail-meta{color:var(--muted);font-size:14px;line-height:1.5}
#detail-dialog.color-detail .color-prompt-heading{flex-wrap:nowrap}
#detail-dialog.color-detail .color-prompt-heading h3{min-width:0;margin:0}
#detail-dialog.color-detail .color-prompt-heading :is(select,.ls-select){flex-shrink:0}
.color-detail .palette-swatch{justify-content:center}
.palette-reference-placeholder{display:grid;place-items:center;height:100%;padding:40px 12px;color:var(--muted);text-align:center;font-size:14px}
@media(max-width:600px){#detail-dialog.color-detail{width:100%;height:100dvh;max-height:100dvh}#detail-dialog.color-detail .detail-content{grid-template-rows:auto minmax(0,1fr) auto minmax(160px,.7fr) auto}}
@media(max-height:500px){#detail-dialog.color-detail{width:min(900px,100vw)}#detail-dialog.color-detail .detail-content{grid-template-rows:auto minmax(0,1fr) auto minmax(100px,.7fr) auto}}

/* Each band owns its copy surface and separate edit/reset controls. */
.palette-swatch-row{position:relative;min-height:0;background:var(--swatch);color:var(--swatch-ink)}
.palette-swatch-row>.palette-swatch{width:100%;height:100%;padding:0 6px 24px}
.palette-swatch-tools{position:absolute;left:6px;bottom:6px;display:flex;gap:4px}
.palette-swatch-tools button{display:grid;place-items:center;width:32px;height:32px;padding:0;min-height:0;border:0;border-radius:5px;background:transparent;color:inherit;cursor:pointer}
.palette-swatch-tools svg{display:block;pointer-events:none}
.palette-swatch-tools button:hover:not(:disabled){background:color-mix(in srgb,var(--swatch-ink) 12%,transparent)}
.palette-swatch-tools button:disabled{opacity:.35;cursor:default}
.palette-swatch-tools button:focus-visible{outline:2px solid var(--swatch-ink);outline-offset:1px}
#detail-dialog.color-detail .palette-swatches-editable{width:100%;aspect-ratio:auto}
.palette-color-editor{position:fixed;z-index:5;width:280px;max-width:calc(100vw - 16px);padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);box-shadow:0 8px 32px #0005}
.palette-color-editor[hidden]{display:none}
.palette-editor-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;font-size:14px}
.palette-editor-heading button{display:grid;place-items:center;flex:none;width:32px;height:32px;min-height:0;border-radius:4px;color:var(--muted)}
.palette-editor-heading button:hover{background:var(--hover);color:var(--ink)}
.palette-editor-fields{display:flex;align-items:flex-end;gap:12px}
.palette-editor-fields label{display:grid;gap:4px;min-width:0;flex:1;font-size:12px;color:var(--muted)}
.palette-editor-fields input[type=text]{width:100%;height:40px;padding:8px;border:1px solid var(--line);border-radius:5px;background:var(--paper);color:var(--ink);font:500 15px/1.4 var(--sans)}
.palette-editor-fields input[type=color]{display:block;flex:none;width:44px;height:40px;padding:2px;border:1px solid var(--line);border-radius:5px;background:var(--paper);cursor:pointer}
.palette-color-editor input[aria-invalid=true]{border-color:var(--ink)}
.palette-color-editor p{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
@media(max-width:600px),(max-height:600px){
 #detail-dialog.color-detail .detail-content{grid-template-rows:auto minmax(240px,1fr) auto minmax(120px,.7fr) auto;overflow-y:auto}
 .palette-swatch-row>.palette-swatch{padding-bottom:24px}
 .palette-swatch-tools{left:4px;bottom:4px;gap:3px}
 .palette-swatch-tools button{width:24px;height:24px}
 #detail-dialog.color-detail [data-reference-kind=palette] .download-example{width:28px;height:28px;min-height:28px;right:4px;bottom:4px}
}

/* Reuse the library controls for appearance series, without changing cards. */
#palette-series{display:flex;gap:8px;flex-wrap:wrap}
#category-nav [data-color-series][aria-pressed="true"]{background:color-mix(in srgb,var(--action-bg) 70%,#fff);border-color:color-mix(in srgb,var(--action-bg) 70%,#fff);color:var(--action-ink);font-weight:650}

@media(max-width:600px){
 #detail-dialog.color-detail{overflow-y:auto;overscroll-behavior:contain}
 #detail-dialog.color-detail .detail-shell{height:auto}
 #detail-dialog.color-detail .detail-content{display:flex;flex-direction:column;height:auto;overflow:visible;gap:12px}
 #detail-dialog.color-detail .detail-examples{height:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:12px 8px;align-items:start}
 #detail-dialog.color-detail .detail-examples figure{width:100%;height:auto;aspect-ratio:2 / 3}
 #detail-dialog.color-detail .detail-examples figure:not([data-reference-kind]){grid-column:1;grid-row:1}
 #detail-dialog.color-detail [data-reference-kind=clothing]{grid-column:2;grid-row:1}
 #detail-dialog.color-detail .detail-examples [data-reference-kind=palette]{grid-column:1/-1;grid-row:2;aspect-ratio:auto;display:grid;gap:4px;overflow:visible;background:transparent}
 #detail-dialog.color-detail .palette-swatches{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:96px;aspect-ratio:auto;height:96px;border-radius:8px;overflow:hidden}
 #detail-dialog.color-detail [data-reference-kind=palette] .download-example{position:static;justify-self:end;width:42px;height:42px;min-height:42px}
 #detail-dialog.color-detail .palette-swatch span{font-size:12px}
 #detail-dialog.color-detail .palette-reference-placeholder{height:100%;padding:16px 8px}
 #detail-dialog.color-detail .prompt-section{flex:none;overflow:visible}
 #detail-dialog.color-detail .prompt-text{flex:none;max-height:none;overflow:visible}
 #detail-dialog.color-detail .close-detail{position:fixed;top:8px;right:8px;width:42px;height:42px;min-height:42px;border-radius:6px;background:var(--surface);z-index:3}
}