/* Set pages (js/setpage.js) and the set tray + "Pair with…" picker (js/settray.js). design/SET-PAGES.md.
   Museum editorial: serif findings, hairlines, color as the only decoration, opaque controls. */

/* ---------- "Pair with…" on a color page ---------- */
.sx-pairbtn{display:inline-flex;align-items:center;gap:8px;height:38px;margin:10px 0 0;padding:0 16px 0 12px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink);font:500 14px/1 var(--sans);box-shadow:inset 0 0 0 1px var(--rule)}
.sx-pairbtn svg{flex:none}
.sx-pairbtn:active{transform:scale(.97)}
[data-ink="dark"] .sx-pairbtn,.cp-hero[data-ink="dark"] .sx-pairbtn{background:rgba(20,19,17,.88);color:#F3F0EA}

/* long-press feedback on any swatch */
.sx-held{animation:sxHeld .42s var(--spring)}
@keyframes sxHeld{0%{transform:scale(1)}40%{transform:scale(.9)}100%{transform:scale(1)}}

/* ---------- the tray pill ---------- */
.sx-tray{position:fixed;left:50%;bottom:calc(var(--bottom) + 16px);transform:translateX(-50%);z-index:19;display:flex;align-items:center;gap:2px;max-width:calc(100vw - 2 * var(--g) - 120px);height:52px;padding:0 4px 0 6px;border-radius:var(--r-pill);background:var(--paper);color:var(--paper-ink);box-shadow:0 10px 30px rgba(0,0,0,.5);animation:sxIn .36s var(--ease) both}
.sx-tray[hidden]{display:none}
html.sheet-open .sx-tray,html.booth .sx-tray{display:none}
@keyframes sxIn{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translateX(-50%)}}
.sx-tray-main{display:flex;align-items:center;gap:10px;min-width:0;height:44px;padding:0 6px}
.sx-tray-main b{font:500 14px/1 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-tray-sw{display:flex;flex:none}
.sx-tray-sw i{display:block;width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--paper);margin-left:-8px}
.sx-tray-sw i:first-child{margin-left:0}
.sx-tray-x{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;color:var(--paper-soft)}
.sx-tray-x:active{background:var(--paper-line)}

/* ---------- the picker sheet ---------- */
.sx-sheet{padding-bottom:calc(var(--bottom) + 28px)}
.sx-head{display:flex;align-items:center;gap:14px;margin:6px 0 14px}
.sx-head>i{flex:none;width:56px;height:56px;border-radius:var(--r-1);background:var(--c);box-shadow:inset 0 0 0 1px rgba(236,232,223,.14)}
.sx-head h2{font:400 30px/1.05 var(--serif);letter-spacing:-.01em}
.sx-addset{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);text-align:left}
.sx-addset .sx-tray-sw i{box-shadow:0 0 0 2px var(--surface-1)}
.sx-addset>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sx-addset b{font:400 19px/1.2 var(--serif)}
.sx-addset small{font:400 13px/1.3 var(--sans);color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-addset svg{flex:none;width:16px;height:16px;color:var(--faint)}
.sx-search{display:block;margin:14px 0 4px}
.sx-search input{width:100%;height:46px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--rule);background:var(--surface-2);color:var(--ink);font:400 16px/1 var(--sans);outline:none}
.sx-search input:focus{border-color:var(--rule-strong)}
.sx-sec{margin:18px 0 0}
.sx-sec h3{font:400 20px/1.2 var(--serif);margin:0 0 2px}
.sx-sub{font:400 13px/1.4 var(--sans);color:var(--soft);margin:0 0 4px}
.sx-rail{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;margin:6px calc(-1 * var(--g)) 0;padding:2px var(--g) 4px;scrollbar-width:none}
.sx-rail::-webkit-scrollbar{display:none}
.sx-opt{flex:none;width:84px;display:flex;flex-direction:column;gap:6px;text-align:left}
.sx-opt i{display:block;width:84px;height:64px;border-radius:var(--r-1);background:var(--c);box-shadow:inset 0 0 0 1px rgba(236,232,223,.12);transition:transform .15s}
.sx-opt:active i{transform:scale(.95)}
.sx-opt b{font:500 13px/1.2 var(--sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sx-opt span{font:400 13px/1.2 var(--sans);color:var(--soft);margin-top:-3px}
.sx-results[hidden],[data-sx-sugs][hidden]{display:none}
.sx-list{display:flex;flex-direction:column}
.sx-li{display:flex;align-items:center;gap:12px;min-height:52px;border-bottom:1px solid var(--rule);text-align:left}
.sx-li i{flex:none;width:36px;height:36px;border-radius:var(--r-1);background:var(--c);box-shadow:inset 0 0 0 1px rgba(236,232,223,.12)}
.sx-li b{font:400 18px/1.2 var(--serif);flex:1}
.sx-li span{font:400 13px/1.2 var(--sans);color:var(--soft)}
.sx-none{font:400 15px/1.4 var(--sans);color:var(--soft);padding:14px 0}
/* ---------- the art-based suggestions (js/settray.js's "Painters paired it with") ---------- */
.sx-opt-art{position:relative}
.sx-info{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff;background:rgba(14,13,11,.45);box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.sx-info:active{background:rgba(14,13,11,.7)}
.sx-art-info{margin:14px 0 0;animation:sxIn2 .22s var(--ease)}
.sx-art-info[hidden]{display:none}
.sx-art-rail{display:flex;gap:10px;overflow-x:auto;margin:8px calc(-1 * var(--g)) 0;padding:2px var(--g) 4px;scrollbar-width:none}
.sx-art-rail::-webkit-scrollbar{display:none}
.sx-art-rail .gl-pin{flex:none;width:130px}
.sx-any{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;margin:20px 0 0;padding:10px 0;border-top:1px solid var(--rule);text-align:left}
.sx-any-ring{flex:none;width:40px;height:40px;border-radius:50%;background:conic-gradient(#E34234,#FFBF00,#50C878,#00A6C8,#3A5BD9,#9B4FD0,#E34234);-webkit-mask:radial-gradient(circle,transparent 9px,#000 10px);mask:radial-gradient(circle,transparent 9px,#000 10px)}
.sx-any>svg{flex:none;width:40px;height:40px;padding:9px;box-sizing:border-box;border-radius:50%;background:var(--surface-2);color:var(--ink)}
.sx-any b{display:block;font:400 19px/1.2 var(--serif)}
.sx-any small{font:400 13px/1.3 var(--sans);color:var(--soft)}

/* ---------- From a photo: tap a spot for its exact pixel (js/settray.js sxPhotoSheet) ---------- */
.sx-photo-wrap{position:relative;margin:14px 0 0;border-radius:var(--r-1);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(236,232,223,.12);cursor:crosshair}
.sx-photo-img{display:block;width:100%;max-height:60vh;object-fit:contain;background:#000}
.sx-photo-pin{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px rgba(14,13,11,.75),0 0 0 4.5px var(--c),0 2px 10px rgba(0,0,0,.5);pointer-events:none}
.sx-sheet [data-sx-photo-strip]{margin-top:14px}
.sx-sheet [data-sx-photo-strip]:empty{display:none}
.sx-picker[hidden],.sx-use[hidden]{display:none}
.sx-use{width:100%;margin:14px 0 0}

/* ---------- the page ---------- */
.sp-title{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.25em;text-wrap:balance}
.sp-title button{font:inherit;letter-spacing:inherit;text-align:left}
.sp-plus{color:var(--faint)}
.sp-title.long{font-size:clamp(36px,10.5vw,48px);line-height:.95}
.sp-title.longer{font-size:clamp(30px,8.6vw,38px);line-height:1}
.sp-undo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 0;padding:10px 6px 10px 16px;border-radius:var(--r-2);background:var(--surface-2);font:400 14px/1.3 var(--sans);color:var(--soft);animation:sxIn2 .3s var(--ease) both}
.sp-undo button{height:36px;padding:0 16px;border-radius:var(--r-pill);background:var(--paper);color:var(--paper-ink);font:500 14px/1 var(--sans)}
@keyframes sxIn2{from{opacity:0;transform:translateY(-6px)}to{opacity:1}}
.sp-pair{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:20px 0 0;border-radius:var(--r-1);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(236,232,223,.1)}
/* "Add a color" as a slim third cell, not a full plate (PLAN §3.6's "+" swatch, extended to pairs so turning
   one into a trio stays a one-tap surface action, not only reachable from ⋯) -- the two plates keep their
   width; only the add cell is narrow. */
.sp-pair:has(.sp-pair-add){grid-template-columns:1fr 1fr auto}
.sp-pair-add{width:40px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--soft)}
.sp-pair-add:active{background:var(--surface-3)}
.sp-pcell{position:relative;display:flex}
.sp-plate{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:min(62vw,300px);padding:14px;background:var(--c);color:#F3F0EA;text-align:left}
.sp-plate[data-ink="dark"]{color:#141311}
.sp-plate b{font:400 22px/1.1 var(--serif);letter-spacing:-.005em}
.sp-plate em{font:500 13px/1 var(--mono);font-style:normal;opacity:.75}
.sp-sample{position:absolute;top:12px;left:14px;font:400 56px/1 var(--serif);letter-spacing:-.02em}
.sp-plate:active{filter:brightness(1.05)}
/* the pair's own remove (David 2026-10-08: removing must work at any count, including a pair down to one) */
.sp-drop-plate{position:absolute;top:8px;right:8px;z-index:2;color:#F3F0EA;background:rgba(14,13,11,.28);border-radius:50%}
.sp-drop-plate[data-ink="dark"]{color:#141311;background:rgba(243,240,234,.32)}
.sp-drop-plate:active{filter:brightness(1.15)}
.sp-strip{display:flex;height:150px;margin:20px 0 0;border-radius:var(--r-1);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(236,232,223,.1);transition:all .4s var(--ease)}
.sp-strip button{position:relative;background:var(--c);min-width:18px;transition:flex .5s var(--ease)}
.sp-strip span{position:absolute;left:8px;bottom:8px;white-space:nowrap;overflow:hidden;max-width:calc(100% - 10px);font:500 13px/1 var(--mono);color:#F3F0EA}
.sp-strip span[data-ink="dark"]{color:#141311}
.sp-strip-cap{font:400 13px/1.4 var(--sans);color:var(--soft);margin:8px 0 0}
.sp-strip button{touch-action:none;transition:box-shadow .15s}
.sp-strip button.dragging{z-index:2;box-shadow:0 10px 24px -8px rgba(0,0,0,.6);transition:none}
/* David, 2026-10-09: "same full-screen preview for a pair or more" -- js/richpage.js colorFocus(). Top-center on
   both shapes: the plates already use their own top-left (the "Aa" sample) and top-right (remove) corners, and
   the strip's own labels (when a reading fills them in) sit bottom-left of each segment, so this is the one
   spot free on both that still reads as "the whole thing", not one color in particular. */
.sp-expand{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:3;width:38px;height:38px}
.sp-names{display:flex;flex-direction:column;margin:10px 0 0}
.sp-name{display:flex;align-items:center;border-bottom:1px solid var(--rule);background:var(--ground);transition:box-shadow .15s}
.sp-name.dragging{position:relative;z-index:2;box-shadow:0 10px 24px -8px rgba(0,0,0,.5);transition:none}
.sp-name>button:first-child{flex:1;display:flex;align-items:center;gap:12px;min-height:52px;text-align:left}
.sp-name i{flex:none;width:34px;height:34px;border-radius:var(--r-1);background:var(--c);box-shadow:inset 0 0 0 1px rgba(236,232,223,.12)}
.sp-name b{flex:1;font:400 19px/1.2 var(--serif)}
.sp-name em{font:400 13px/1 var(--mono);font-style:normal;color:var(--faint)}
.sp-handle{display:grid;place-items:center;flex:none;width:44px;height:44px;color:var(--faint);touch-action:none;cursor:grab}
.sp-handle:active{cursor:grabbing}
.sp-drop{display:grid;place-items:center;flex:none;width:44px;height:44px;color:var(--faint)}
/* Edit (design/SIMPLIFY/PLAN.md §3.6: "The per-row drag and remove handles -> ⋯ › Edit"): hidden until ⋯ ·
   Edit colors asks for them (js/setpage.js setEditing toggles .sp-editing on the page) -- nothing about the
   drag/remove wiring itself changes, only when it's visible. */
.sp-page:not(.sp-editing) .sp-handle,.sp-page:not(.sp-editing) .sp-drop,.sp-page:not(.sp-editing) .sp-drop-plate{display:none}
.sp-page.sp-editing .sp-name>button:first-child{flex:1 1 auto}
/* "Add a color" as a quiet "+" tile at the end of the swatches, not a 4th action-row button (PLAN §3.6) */
.sp-plus-sw{flex:none;width:44px;display:grid;place-items:center;background:var(--surface-2);color:var(--soft)}
.sp-plus-sw:active{background:var(--surface-3)}
/* a sibling of .sp-name (same row shape), but never matched as one of the set's own colors -- tools/smoke's
   own "the trio lists three colors" check (and anything else that counts .sp-name rows) must only ever see
   real colors here. */
.sp-name-add{display:flex;align-items:center;gap:12px;min-height:52px;width:100%;text-align:left;border-bottom:1px solid var(--rule);color:var(--soft)}
.sp-plus-row{width:34px;height:34px;border-radius:var(--r-1)}
.sp-lead{margin:22px 0 4px;font:400 22px/1.32 var(--serif);letter-spacing:-.005em;min-height:58px;text-wrap:pretty}
.sp-acts .cs-acts{margin-top:10px}
.sp-sec{margin:30px 0 0;padding-top:16px;border-top:1px solid var(--rule)}
.sp-sec[hidden]{display:none}
.sp-sec h3{font:400 26px/1.15 var(--serif);letter-spacing:-.01em;margin:0 0 8px}
.sp-h4{font:400 20px/1.2 var(--serif);margin:22px 0 2px}
.sp-sub{font:400 14px/1.45 var(--sans);color:var(--soft);margin:0 0 8px;text-wrap:pretty}
.sp-say{font:400 17px/1.45 var(--serif);margin:0 0 10px;text-wrap:pretty}
.sp-facts{display:flex;flex-direction:column}
.sp-fact{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule)}
.sp-fact:last-child{border-bottom:0}
.sp-fact b{font:500 13px/1.45 var(--sans);color:var(--soft)}
.sp-fact p{font:400 15px/1.45 var(--sans);text-wrap:pretty}
.sp-link{text-decoration:underline;text-decoration-color:rgba(236,232,223,.35);text-underline-offset:3px}
.sp-big{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;margin:2px 0 12px}
.sp-big b{grid-row:span 2;font:400 64px/.9 var(--serif);letter-spacing:-.03em}
.sp-big span{font:400 18px/1.25 var(--serif)}
.sp-big em{font:400 13px/1.4 var(--sans);font-style:normal;color:var(--soft)}
.sp-rail{margin-top:10px}
.sp-dtile{flex:none;width:160px}
.sp-dtile .pt-tile{width:100%}
.sp-plist{display:flex;flex-direction:column}
.sp-prow{display:flex;align-items:center;gap:14px;width:100%;min-height:68px;padding:10px 0;border-bottom:1px solid var(--rule);text-align:left}
.sp-prow>svg{flex:none;width:16px;height:16px;color:var(--faint)}
.sp-psw{display:flex;flex:none;border-radius:var(--r-1);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(236,232,223,.12)}
.sp-psw i{display:block;width:24px;height:46px;background:var(--c)}
.sp-psw-n i{width:16px}
.sp-psw i.new{width:30px;box-shadow:inset 3px 0 0 var(--ground)}
.sp-pt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sp-pt b{font:400 18px/1.2 var(--serif)}
.sp-pt small{font:400 13px/1.4 var(--sans);color:var(--soft)}
.sp-lkstr{display:flex;flex:none;width:72px;height:46px;border-radius:var(--r-1);overflow:hidden}
.sp-lkstr i{display:block;background:var(--c)}
.sp-imp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.sp-imp-head h3{margin:0}
.sp-imp{padding:14px 0 16px;border-bottom:1px solid var(--rule)}
.sp-imp:last-child{border-bottom:0}
/* Improve: which colors may change, and only the changed swatches lit in the After strip */
.sp-istrip.after i:not(.moved){opacity:.4}
.sp-sel{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.sp-lk{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 8px;border-radius:999px;background:var(--s2,rgba(0,0,0,.18));color:var(--soft);font:400 15px/1 var(--sans);box-shadow:inset 0 0 0 1px rgba(236,232,223,.14)}
.sp-lk i{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(236,232,223,.2)}
.sp-lk.on{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.sp-selnote{font:italic 400 17px/1.3 var(--serif);color:var(--soft);margin:6px 0 0}
.sp-imp.blocked>p{margin-bottom:0}
.sp-imp-t{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sp-imp-t b{font:400 21px/1.2 var(--serif)}
.sp-apply{flex:none;height:38px;padding:0 18px;border-radius:var(--r-pill);background:var(--paper);color:var(--paper-ink);font:500 14px/1 var(--sans)}
.sp-apply:active{transform:scale(.96)}
.sp-imp>p{font:400 15px/1.45 var(--sans);color:var(--soft);margin:6px 0 12px;text-wrap:pretty}
.sp-ba{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:6px 10px}
.sp-ba>span{font:500 13px/1 var(--sans);color:var(--faint)}
.sp-istrip{display:flex;height:34px;border-radius:var(--r-1);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(236,232,223,.1)}
.sp-istrip i{flex:1;background:var(--c);position:relative}
.sp-istrip i.moved::after{content:"";position:absolute;left:50%;bottom:4px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.sp-chg{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.sp-chg li{font:400 15px/1.9 var(--sans)}
.sp-chg button{display:inline;text-align:left}
.sp-chg i{display:inline-block;width:14px;height:14px;margin:0 6px -2px 0;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(236,232,223,.2)}
.sp-chg span{color:var(--faint)}
.sp-chg em{font:400 13px/1 var(--sans);font-style:normal;color:var(--soft);white-space:nowrap}
.sp-chg em::before{content:"· "}
.sp-fine{margin:30px 0 calc(var(--tabh) + 40px)}
@media (max-width:374px){
  .sp-fact{grid-template-columns:86px 1fr}
  .sp-big b{font-size:52px}
  .sp-sample{font-size:44px}
}

/* landscape lane (2026-10-09, CSS only -- js/setpage.js untouched): on a short rotated screen, a plate sized
   off the (now very wide) viewport width would eat almost the whole height before any fact or finding shows.
   Cap it to the available height instead, same number either way (David's "max-width centered sheet" column
   already keeps the page a sane width, css/menus2.css/app.css .screen). */
@media (orientation:landscape){
  .sp-plate{min-height:min(40dvh,220px)}
  .sp-sample{font-size:44px}
}

/* ---------- Pair with…: a non-scrolling head (the anchor + the try-on preview) above a scrolling candidate
   list, js/core.js sheet()'s own supported shape for this ([data-sheet-scroll], already used by js/home.js's
   chooser sheet) rather than position:sticky inside the sheet's position:fixed box, which some engines get
   wrong (the preview would stop tracking the scroll and drift off-screen). David, 2026-10-09: "too small" and
   "I scroll past the preview" — bigger, and stays in view while the candidate list scrolls underneath; it
   shrinks a little once you've scrolled, so it never crowds the list, but the color and the actions stay put.
   The base .sheet (app.css) has no fixed height -- it shrinks to fit its content, up to max-height:88dvh, and
   since it's bottom-anchored, a SHORTER sheet sits lower, with a taller top offset. "Painters paired it with"
   and "In famous palettes" fill in asynchronously after the first paint; once there's enough art data to mine
   (the common case), that late content alone can push the sheet from "fits without scrolling" past 88dvh,
   which visibly shifts the whole sheet (and the pinned preview inside it) up the screen after the fact. Fixing
   the sheet at its full allowed height from the first frame removes that reflow entirely -- content that
   doesn't fill it just leaves [data-sheet-scroll] with a little extra (already-scrollable) room at the bottom. */
.sheet.sx-pick-sheet{display:flex;flex-direction:column;overflow:hidden;padding-bottom:0;height:88dvh}
.sx-pick-sheet>.grab{flex:none}
.sx-pick-sheet>.sx-head,.sx-pick-sheet>.sx-try{flex:none}
.sx-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--bottom) + 28px)}
.sx-try{margin:16px 0 0;padding-top:2px;padding-bottom:10px;background:var(--surface-1);transition:padding .2s var(--ease)}
.sx-try-big{display:flex;border-radius:var(--r-2);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(236,232,223,.12);height:clamp(96px,30vw,150px);transition:height .22s var(--ease)}
.sx-try-seg{position:relative;flex:1;min-width:0;display:flex;align-items:flex-end;padding:12px;background:var(--c);transition:flex .3s var(--ease),padding .2s var(--ease)}
.sx-try-seg b{font:500 15px/1.2 var(--sans);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:font-size .2s var(--ease)}
/* David, 2026-10-09: "the right second color is outlined... a little white line in between" — no border or
   gap between the two halves any more; "trying" is marked by a small badge floating inside its own half,
   clear of the shared seam, plus the same gentle scale-in it always had. */
.sx-try-seg.trying{animation:sxTryIn .22s var(--ease,ease) both}
.sx-try-seg.trying::after{content:"Trying";position:absolute;top:10px;right:10px;padding:3px 10px;border-radius:999px;background:rgba(14,13,11,.5);color:#fff;font:500 11px/1.4 var(--sans);letter-spacing:.01em;text-shadow:none}
.sx-try.collapsed .sx-try-seg.trying::after{display:none}
.sx-try-seg.empty{background:transparent;box-shadow:inset 0 0 0 2px dashed rgba(236,232,223,.3);align-items:center;justify-content:center;color:var(--faint)}
.sx-try-seg.empty span{font:400 32px/1 var(--sans)}
@keyframes sxTryIn{from{transform:scale(.97);opacity:.4}}
.sx-try-rel{font:italic 400 17px/1.3 var(--serif);color:var(--soft);margin:10px 0 0;transition:margin .2s var(--ease),opacity .2s var(--ease)}
.sx-try-acts{display:flex;gap:10px;margin-top:10px}
.sx-try-acts .btn{flex:1;height:48px}
/* collapsed: past a little scroll, the preview stays but takes less of the screen */
.sx-try.collapsed{padding-bottom:6px}
.sx-try.collapsed .sx-try-big{height:60px}
.sx-try.collapsed .sx-try-seg{padding:6px 10px}
.sx-try.collapsed .sx-try-seg b{font-size:12px}
.sx-try.collapsed .sx-try-rel{display:none}
.sx-try.collapsed .sx-try-acts{margin-top:8px}
@media (prefers-reduced-motion:reduce){.sx-try-seg.trying{animation:none}}

/* the small-chip strip: still used by "From a photo" (js/settray.js sxPhotoSheet), which has no long scrolling
   list under it and so needs no sticky/big treatment of its own. */
.sx-try-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.sx-try-sw{flex:none;width:76px;height:76px;border-radius:var(--r-2);background:var(--c);display:flex;align-items:flex-end;padding:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.sx-try-sw b{font:500 12px/1.2 var(--sans);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-try-sw.trying{animation:sxTryIn .22s var(--ease,ease) both;box-shadow:0 0 0 2px var(--ink,#ECE8DF)}
.sx-try-sw.empty{background:transparent;box-shadow:inset 0 0 0 2px dashed rgba(236,232,223,.3);border:2px dashed var(--rule);align-items:center;justify-content:center;color:var(--faint)}
.sx-try-sw.empty span{font:400 28px/1 var(--sans)}

/* ---------- double-tap the top swatches to keep the palette: an Instagram-style heart burst ---------- */
.sp-pair,.sp-strip{position:relative}
.sp-heart{position:absolute;transform:translate(-50%,-50%) scale(.3);pointer-events:none;z-index:40;color:#fff;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));animation:spHeart .75s cubic-bezier(.2,1.4,.4,1) forwards}
.sp-heart svg{display:block;width:72px;height:72px}
@keyframes spHeart{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}18%{transform:translate(-50%,-50%) scale(1.15);opacity:1}32%{transform:translate(-50%,-50%) scale(.92)}45%{transform:translate(-50%,-50%) scale(1.04)}100%{transform:translate(-50%,-60%) scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.sp-heart{animation:spHeartFade .5s ease forwards}}
@keyframes spHeartFade{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

/* ---------- the top bar needs a real backdrop once content has scrolled under it (David, 2026-10-09): the
   plain gradient wash let the lead/fact text show through near Back. Solid + blurred past a few px of scroll. --- */
.sp-page .art-top{transition:background .18s,box-shadow .18s}
.sp-page .art-top.scrolled{background:var(--ground);box-shadow:0 1px 0 var(--rule)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .sp-page .art-top.scrolled{background:rgba(14,13,11,.88);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
}

/* ---------- Together in paintings: the match browser (Closeness, Minimum share, Holds at least N of M) ----------
   David, 2026-10-09: sliders are the only way to widen a match — never a silent near-miss shown as if it counted. */
.sp-match{margin-top:22px}
.sp-match .pt-sl{margin-top:2px}
.sp-mt-n{padding:12px 0 8px;border-top:1px solid var(--rule)}
.sp-mt-body{margin-top:4px}
.sp-mt-body .btn{margin-top:4px}
.sp-mtile{position:relative}
.gl-rail>.sp-mtile{flex:none;scroll-snap-align:start}
.gl-rail>.sp-mtile .gl-im{height:150px;width:auto}
.gl-rail>.sp-mtile>.gl-pin>:not(.gl-im){width:0;min-width:100%}
.sp-dots{position:absolute;top:6px;right:6px;z-index:1;display:flex;gap:3px;padding:3px 4px;border-radius:var(--r-pill);background:rgba(14,13,11,.5)}
.sp-dot{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);opacity:.3}
.sp-dot.on{opacity:1}

/* ---------- the palette page's preview (Lane E, 2026-10-20): one control, four looks ---------- */
.sp-title-big{display:block}
.sp-title-big button{display:inline}
.sp-from{display:flex;align-items:flex-start;gap:14px;margin:0}
.sp-from .sp-title{flex:1;min-width:0;display:block;margin:0;overflow-wrap:anywhere;text-wrap:balance;font-size:clamp(28px,7.4vw,34px);line-height:1.08}   /* a painting title runs long: a size down from the name-chain title */
.sp-from-img{flex:none;width:64px;height:80px;margin:4px 0 0;border-radius:var(--r-1);overflow:hidden;background:var(--surface-2);box-shadow:inset 0 0 0 1px rgba(236,232,223,.12)}
.sp-from-img img{display:block;width:100%;height:100%;object-fit:cover}
.sp-from-img:active{filter:brightness(1.1)}
.sp-views{display:flex;gap:2px;margin:20px 0 0;padding:3px;border-radius:var(--r-pill);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--rule)}
.sp-views button{flex:1 1 auto;min-width:0;height:40px;padding:0 10px;border-radius:var(--r-pill);font:500 15px/1 var(--sans);color:var(--soft);white-space:nowrap;transition:background .2s var(--ease),color .2s var(--ease)}
.sp-views button.on{background:var(--paper);color:var(--paper-ink)}
.sp-vshort{display:none}
@media (max-width:359px){.sp-vlong{display:none}.sp-vshort{display:inline}.sp-views button{padding:0 6px;font-size:14px}}
.sp-vpane[hidden]{display:none}
.sp-vpane .sp-strip{margin-top:12px}
.sp-strip button{min-width:0}
.sp-grid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:6px;margin:12px 0 0}
.sp-grid button{aspect-ratio:1;border-radius:var(--r-1);background:var(--c);box-shadow:inset 0 0 0 1px rgba(236,232,223,.12)}
.sp-grid button:active{filter:brightness(1.08)}
.sp-poster{margin:12px auto 0;max-width:340px;padding:7% 7% 9%;background:var(--paper);border-radius:var(--r-1);box-shadow:0 14px 30px -18px rgba(0,0,0,.7)}
.sp-poster-in{position:relative;aspect-ratio:80/100;background:var(--paper)}
.sp-poster-in button{position:absolute;background:var(--c);box-shadow:inset 0 0 0 .5px rgba(20,19,17,.18)}
.sp-poster-in button:active{filter:brightness(1.06)}
.sp-onp{margin:12px 0 0;display:flex;gap:8px;align-items:stretch}
.sp-onp-stage{position:relative;flex:1;min-width:0;line-height:0;border-radius:var(--r-1);overflow:hidden;background:var(--surface-2);box-shadow:inset 0 0 0 1px rgba(236,232,223,.1);cursor:pointer}
.sp-onp-stage img{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain}
.sp-pin{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--c);border:3px solid #F3F0EA;box-shadow:0 0 0 1px rgba(14,13,11,.55),0 2px 8px rgba(0,0,0,.5)}
.sp-pin:active{transform:scale(1.15)}
.sp-onp-bars{flex:none;width:44px;display:flex;flex-direction:column;border-radius:var(--r-1);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(236,232,223,.1)}
.sp-onp-bars button{flex:1;min-height:0;background:var(--c)}
.sp-nt{flex:1;min-width:0;font:400 19px/1.2 var(--serif)}
.sp-nt b{display:inline;font:inherit}
.sp-nt small{font:400 14px/1.2 var(--sans);color:var(--soft)}
.sp-strip .sp-expand{position:absolute;flex:none;min-width:38px}
.sp-from .sp-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}