/* The painting map (js/paintmap.js): thousands of paintings on one canvas through the color map's lens.
   Full screen and edge to edge; the only chrome is the back button, the title (what's showing; tap to filter), one
   line saying what position means, the caption of the painting in the middle, and the right corner (arrange). */
.pmx .pmx-stage{position:absolute;inset:0;overflow:hidden;background:var(--ground)}
.pmx-cv{display:block;width:100%;height:100%;touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent}
.pmx-cv:active{cursor:grabbing}
.pmx-wait{position:absolute;left:0;right:0;top:46%;margin:0;padding:0 32px;text-align:center;font:italic 400 19px/1.35 var(--serif);color:var(--soft)}
.pmx-wait[hidden]{display:none}
.pmx-wait .wl{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* top: back, the title, a spacer that keeps the title centered */
.pmx-top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:flex-start;gap:10px;padding:calc(var(--top) + 10px) 12px 30px;
  background:linear-gradient(to bottom,rgba(14,13,11,.86),rgba(14,13,11,.5) 60%,rgba(14,13,11,0));pointer-events:none}
.pmx-top>*{pointer-events:auto}
.pmx-sp{flex:none;width:44px}
.pmx-title{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px 7px;border-radius:var(--r-2);text-align:center;color:var(--ink);transition:transform .25s var(--spring)}
.pmx-title:active{transform:scale(.97)}
.pmx-title b{display:flex;align-items:center;gap:4px;font:400 22px/1.05 var(--serif);letter-spacing:-.01em}
.pmx-title b svg{color:var(--soft);flex:none}
.pmx-title small{max-width:100%;font:400 15px/1.25 var(--sans);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* David, 2026-10-09: the italic hint sat below .pmx-top's own gradient (which fades to transparent well before
   this line), with only a soft text-shadow over a mosaic that can be bright or busy -- not legible. An opaque
   pill (the same floating-hint pattern as css/aesthetics-graph.css .ag-hint) reads at any thumbnail underneath it. */
.pmx-why{position:absolute;z-index:3;left:50%;top:calc(var(--top) + 72px);transform:translateX(-50%);max-width:calc(100% - 32px);margin:0;
  padding:7px 16px;border-radius:var(--r-pill);background:rgba(14,13,11,.86);text-align:center;font:italic 400 15px/1.3 var(--serif);
  color:rgba(236,232,223,.92);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* David, 2026-10-09: a removable chip for every active filter, atop the map -- the primary way to SEE and undo
   one, whichever way it got set (the Filter tab, or a tap on a painting's own facet chip below), replacing a
   trip into the sheet just to clear one thing. */
.pmx-chipbar{position:absolute;z-index:3;left:0;right:0;top:calc(var(--top) + 64px);   /* right under the header (was +108: room for a retired "why" pill, an empty band) */
  display:flex;gap:6px;
  overflow-x:auto;padding:0 12px;scrollbar-width:none;pointer-events:none}
.pmx-chipbar[hidden]{display:none}
.pmx-chipbar::-webkit-scrollbar{display:none}
.pmx-xchip{pointer-events:auto;flex:none;display:flex;align-items:center;gap:6px;height:34px;padding:0 6px 0 14px;
  border-radius:var(--r-pill);background:rgba(14,13,11,.86);color:rgba(236,232,223,.92);font:400 14px/1 var(--sans);
  white-space:nowrap;transition:transform .2s var(--spring)}
.pmx-xchip i{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:rgba(236,232,223,.14)}
.pmx-xchip i svg{width:11px;height:11px}
.pmx-xchip:active{transform:scale(.95)}

/* filtering by example (David, 2026-10-09): the centered painting's own facets, each one tap = "only these" */
.pmx-facets{position:absolute;z-index:3;left:0;right:0;padding:0 36px 0 12px;scroll-padding:0 36px 0 12px;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);bottom:calc(var(--corner-b,calc(var(--bottom) + 12px)) + var(--corner,56px) * 2 + 16px + var(--cap-x,0px));
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;pointer-events:none}
.pmx-facets[hidden]{display:none}
.pmx-facets::-webkit-scrollbar{display:none}
.pmx-fchip{pointer-events:auto;flex:none;display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;
  border-radius:var(--r-pill);background:rgba(14,13,11,.86);color:rgba(236,232,223,.92);font:400 14px/1 var(--serif);
  white-space:nowrap;transition:transform .2s var(--spring)}
.pmx-fchip i{flex:none;width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.pmx-fchip-more{font-style:italic;color:rgba(236,232,223,.98)}
.pmx-fchip-walk{background:var(--paper);color:var(--paper-ink);font-style:normal}
.pmx-fchip:active{transform:scale(.95)}

/* "Walk from here" (David, 2026-10-09): a trail of small dots, one per step, above the facets row; the current
   step is ringed and bigger. Stacks above .pmx-facets regardless of DOM order (both are position:absolute). */
.pmx-walk{position:absolute;z-index:3;left:12px;right:16px;bottom:calc(var(--corner-b,calc(var(--bottom) + 12px)) + var(--corner,56px) * 2 + 60px + var(--cap-x,0px));
  display:flex;align-items:center;gap:7px;overflow-x:auto;scrollbar-width:none;pointer-events:none}
.pmx-walk[hidden]{display:none}
.pmx-walk::-webkit-scrollbar{display:none}
.pmx-walk-x{pointer-events:auto;flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(14,13,11,.86);color:rgba(236,232,223,.85)}
.pmx-walk-x svg{width:12px;height:12px}
.pmx-walk-dot{pointer-events:auto;flex:none;width:14px;height:14px;border-radius:50%;background:var(--c);
  box-shadow:0 0 0 2px rgba(14,13,11,.7);transition:transform .2s var(--spring)}
.pmx-walk-dot.cur{width:20px;height:20px;box-shadow:0 0 0 2px rgba(14,13,11,.7),0 0 0 4px var(--paper)}
.pmx-walk-dot:active{transform:scale(.85)}

/* bottom: the painting in the middle, named; "center on this" and the heart beside it; the corner at the right */
.pmx-cap{position:absolute;z-index:3;left:12px;right:16px;bottom:calc(var(--corner-b,calc(var(--bottom) + 12px)) + var(--corner,56px) + 8px);min-height:var(--corner,56px);
  display:flex;align-items:center;gap:4px;padding:4px 4px 4px 0;border-radius:var(--r-2);background:var(--surface-2);border:1px solid rgba(236,232,223,.12);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.pmx-cap[hidden]{display:none}
.pmx-cap::before{content:"";flex:none;align-self:stretch;width:6px;margin-right:8px;border-radius:var(--r-2) 0 0 var(--r-2);background:var(--c,#3A3630)}
.pmx-cap-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:6px 0;text-align:left;color:var(--ink)}
.pmx-cap-main b{font:400 18px/1.15 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmx-cap.two .pmx-cap-main b,.pmx-cap.two .pmx-cap-main small{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pmx-cap-main small{font-size:14px;line-height:1.2;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmx-heart{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--soft);transition:color .2s,transform .2s var(--spring)}
.pmx-heart svg{width:21px;height:21px}
.pmx-heart[hidden]{display:none}
.pmx-heart.on{color:#E8787A}
.pmx-heart:active{transform:scale(.88)}
.pmx-heart.pop svg{animation:fvaPop .42s var(--spring)}
.pmx-do svg{width:20px;height:20px}
.pmx-bloom{position:fixed;z-index:6}

/* the arc (Home's right-corner menu): the current arrangement is ringed */
.pmx-stem .hm-do-ic{color:var(--ink)}

/* the time scrubber (David, 2026-10-09: "paintings appear decade by decade"), in the Arrange tab */
.pmx-scrub{display:flex;align-items:center;gap:10px;margin:2px 0 6px}
.pmx-scrub input[type="range"]{flex:1;accent-color:var(--paper)}
.pmx-scrub-play{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);color:var(--ink);transition:transform .2s var(--spring)}
.pmx-scrub-play.on{background:var(--paper);color:var(--paper-ink)}
.pmx-scrub-play svg{width:17px;height:17px}
.pmx-scrub-play:active{transform:scale(.92)}

/* Filter */
.pmx-scrim{background:rgba(0,0,0,.3)}
.pmx-sheet{padding-top:10px;padding-bottom:0}
.pmx-sheet .grab{margin-bottom:10px}
.pmx-sh-top{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.pmx-sh-top b{font:400 30px/1 var(--serif);letter-spacing:-.02em}
.pmx-sh-top span{flex:1;font:400 16px/1 var(--sans);color:var(--soft);font-variant-numeric:tabular-nums}
.pmx-reset{min-height:44px;padding:0 4px;font:italic 400 17px/1 var(--serif);color:var(--soft)}
.pmx-row{padding:12px 0 6px;border-top:1px solid var(--rule)}
.pmx-lab{display:block;margin-bottom:9px;font:400 17px/1 var(--serif);color:var(--ink)}
.pmx-chips{display:flex;flex-wrap:wrap;gap:7px}
.pmx-chips.pmx-sub{margin-top:8px;padding-left:10px;border-left:2px solid var(--rule)}
.pmx-chips button{display:flex;align-items:baseline;gap:6px;min-height:40px;padding:0 14px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink);font:400 16px/40px var(--serif);
  transition:background .2s,color .2s,transform .2s var(--spring)}
.pmx-chips button em{font:500 12px/1 var(--mono);font-style:normal;color:var(--faint);font-variant-numeric:tabular-nums}
.pmx-chips button.on{background:var(--paper);color:var(--paper-ink)}
.pmx-chips button.on em{color:var(--paper-soft)}
.pmx-chips button:disabled{opacity:.38}
.pmx-chips button:active{transform:scale(.95)}
.pmx-chips .pmx-more{background:none;color:var(--soft);font-style:italic;text-decoration:underline;text-underline-offset:3px}
/* the swatch strip bleeds to the sheet's own 16px padding (not --g, which is 24px and made the sheet scroll sideways), and the
   sheet's scroller is vertical-only, so no row can ever push the whole sheet side to side (David, 2026-10-20) */
.pmx-sw{display:flex;gap:6px;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none}
.pmx-chooser .hm-ch-scroll{overflow-x:hidden}
.pmx-sw::-webkit-scrollbar{display:none}
.pmx-sw button{flex:none;width:40px;height:40px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:transform .2s var(--spring)}
.pmx-sw button.on{box-shadow:0 0 0 2px var(--surface-1),0 0 0 4px var(--paper)}
.pmx-sw button:active{transform:scale(.9)}
.pmx-cap2{display:flex;align-items:center;gap:8px;margin:6px 0 0!important;font:400 16px/1.3 var(--serif)!important;color:var(--ink)!important}
.pmx-cap2 i{width:18px;height:18px;border-radius:50%;background:var(--c);flex:none}
.pmx-cap2 span{color:var(--soft)}
.pmx-find{margin:0 0 10px}
/* David, 2026-10-10: multi-select filters (color range, time range, multiple countries/regions) -- a dual-
   handle range (two overlaid inputs, only the thumb is clickable so they never fight each other for a click on
   the shared track), a tiny decade histogram sitting right above the When range, and a secondary label for a
   sub-control inside an already-labeled row (Closeness/Hue family/Lightness live inside "Color"). */
.pmx-lab2{margin:10px 0 7px;font:400 14px/1 var(--sans);color:var(--soft)}
.pmx-scrub .pmx-lab2{flex:none;margin:0}
.pmx-colmode{margin:8px 0 2px;max-width:160px}
.pmx-range2{position:relative;height:30px;margin:2px 0 4px;touch-action:pan-x}
.pmx-range2::before{content:"";position:absolute;top:50%;left:0;right:0;height:4px;margin-top:-2px;border-radius:2px;background:var(--surface-3)}
.pmx-range2::after{content:"";position:absolute;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--ink);left:var(--lo,0%);right:calc(100% - var(--hi,100%))}
.pmx-range2 input{position:absolute;inset:0;width:100%;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none}
.pmx-range2 input::-webkit-slider-runnable-track{background:none}
.pmx-range2 input::-moz-range-track{background:none}
.pmx-range2 input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:26px;height:26px;margin-top:2px;border-radius:50%;background:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.pmx-range2 input::-moz-range-thumb{pointer-events:auto;width:26px;height:26px;border:0;border-radius:50%;background:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.pmx-cap3{display:flex;justify-content:space-between;margin:0!important;font:400 13px/1 var(--sans)!important;color:var(--soft)!important;font-variant-numeric:tabular-nums}
.pmx-hist{display:flex;align-items:flex-end;gap:1px;height:26px;margin:10px 0 2px;opacity:.55}
.pmx-hist i{flex:1;min-width:1px;height:calc(var(--h, .05) * 100%);background:var(--ink);border-radius:1px 1px 0 0}
.pmx-go{position:sticky;bottom:0;width:100%;margin:14px 0 0;box-shadow:0 -14px 18px var(--surface-1)}
.pmx-sheet .pmx-go{margin-bottom:calc(var(--bottom) + 14px)}

/* One-painter map (David, 2026-10-20): the corner carries its word, the chip row says how much of the painter you're
   seeing, and the Filter tab leads with hue and years. */
.pmx-xcount{padding:0 14px;gap:8px;color:rgba(236,232,223,.98)}
.pmx-xcount svg{width:15px;height:15px;flex:none;opacity:.8}
.pmx-xall{padding:0 14px;color:rgba(236,232,223,.98)}
.pmx-dot{flex:none;align-self:center;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.pmx-none{margin:2px 0 8px;font:italic 400 17px/1.35 var(--serif);color:var(--soft)}
.pmx-chipbar.pmx-chipbar-wrap{flex-wrap:wrap;overflow:visible;row-gap:6px}

/* the search sheet's rows: a long suggestion ("Dutch · Baroque era · 1860–1880") wraps instead of clipping, the count stays whole */
.pmx-findsheet .sr-row b{flex:1;min-width:0;overflow-wrap:anywhere}
.pmx-findsheet .sr-row small{flex:none;text-align:right;white-space:nowrap}
.pmx-findsheet .sr-none{display:block;margin-bottom:4px;font:400 17px/1.3 var(--serif);color:var(--ink)}

/* swipeable chip rows (David, 2026-10-20: "this needs to be scrollable"): the rows let touches fall through to the map
   (pointer-events:none), so the map's own drag took every swipe and the row never scrolled. Each row now takes its own touches
   and scrolls sideways only; only that thin strip stops panning the map. */
.pmx-facets,.pmx-chipbar,.pmx-walk{pointer-events:auto;touch-action:pan-x;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.pmx-fchip,.pmx-xchip{touch-action:pan-x}