/* Palette Girlies: "Shop by color" on /makeup/<season> (markup: tools/makeup_space.py, behavior: site/js/shade-space.js).
   A frame of paper with the season's watercolor cloud in it, and the picks floating where their colors are. The pictures are cut out with the watercolor edge masks of the
   pick cards and multiplied over cream; the exact color of each pick sits on its corner as a flat chip (the data), the watercolor is only the frame. Only the picks move
   (one transform each); nothing above them makes a stacking context that would change a blend. Without JavaScript the section is not shown and the folds of extras
   under each category are the list. The card of a pick is the finder's dialog (site/css/makeup-finder.css, fetched by the script). */

.ss { display: none; }
html.js .ss { display: grid; }
details.more-picks[hidden] { display: none !important; }

.ss-frame { position: relative; height: clamp(560px, 76vh, 700px); margin-top: 6px; overflow: hidden; isolation: isolate; color: var(--ink); background: var(--card);
  border: 2px solid var(--ink); border-radius: 6px 20px 7px 18px / 18px 7px 20px 6px; box-shadow: var(--shadow-paper); }
.ss-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 0 16px; text-align: center; font: 400 17px/1.4 var(--sans); color: var(--ink-soft); }
.ss.is-failed .ss-frame { height: auto; min-height: 0; }
.ss.is-failed .ss-loading { position: static; padding: 28px 16px; }
.ss-wash, .ss-axes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ss-wash { overflow: hidden; }
.ss-blob { position: absolute; left: 0; top: 0; width: 256px; height: 256px; margin: -128px 0 0 -128px; background: center / 100% 100% no-repeat; opacity: 0; transition: opacity 1s var(--ease); will-change: transform; pointer-events: none; }
.ss-blob.is-on { opacity: var(--a, .4); }
.is-flat .ss-blob { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
.ss-grid, .ss-edge { fill: none; stroke: rgba(43, 34, 48, .11); stroke-width: 1; }
.ss-edge { stroke: rgba(43, 34, 48, .24); }
.ss-stem { stroke: rgba(43, 34, 48, .6); stroke-width: 1.4; stroke-dasharray: 4 4; }
.ss-mark { stroke: rgba(43, 34, 48, .6); stroke-width: 1.2; }
.ss-giz { position: absolute; left: 10px; bottom: calc(var(--ss-b, 110px) + 4px); width: 190px; height: 100px; overflow: visible; pointer-events: none; }
.ss-giz-l, .ss-giz-z { stroke: rgba(74, 60, 76, .85); stroke-width: 2; stroke-linecap: round; }
.ss-giz-l.ss-giz-z { stroke: rgba(156, 44, 78, .9); }
.ss-giz-t, .ss-giz-t.ss-giz-z { font: 700 12.5px Karla, system-ui, sans-serif; fill: #4A3C4C; paint-order: stroke; stroke: #FFFDF8; stroke-width: 4px; stroke-linejoin: round; }
.ss-giz-t.ss-giz-z { fill: #6E1D37; }

/* the plot: the picks are placed here, one transform each */
.ss-plot { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.ss-plot.is-drag { cursor: grabbing; }
.ss-plot:focus-within .ss-pt:not(:focus-visible) { outline: 0; }
.ss-pt { position: absolute; left: 0; top: 0; width: var(--sz, 80px); height: var(--sz, 80px); margin: calc(var(--sz, 80px) / -2) 0 0 calc(var(--sz, 80px) / -2); padding: 0; border: 0; border-radius: 14px; background: none; color: inherit; cursor: pointer;
  will-change: transform; transition: opacity .3s var(--ease); -webkit-tap-highlight-color: transparent; }
.ss-pt.is-gone { visibility: hidden; pointer-events: none; }
.ss-pt:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.ss-pt-in { position: relative; display: block; width: 100%; height: 100%; transform: rotate(var(--rot, 0deg)); transition: transform .38s var(--ease), opacity .3s; }
/* the picture is an image cut out in the script (mask, cream and shadow baked in), a little larger than the pick so its shadow has room */
.ss-pt-pic { position: absolute; inset: calc(var(--sz, 80px) * -.0735); display: block; background: center / 100% 100% no-repeat; opacity: 0; transition: opacity .4s var(--ease); }
.ss-pt-pic.is-on { opacity: 1; }
/* a pick with no picture is a dab of its exact color on a paper edge */
.ss-pt-blk { position: absolute; inset: 25%; display: block; background: var(--c); border: 3px solid #FFFDF8; border-radius: 48% 52% 46% 54% / 54% 46% 52% 48%; box-shadow: 0 3px 4px rgba(43, 34, 48, .3), inset 0 0 0 1px rgba(43, 34, 48, .35); }
.ss-pt-blk ~ .ss-pt-chip { display: none; }
.ss-pt-chip { position: absolute; right: -2px; bottom: -2px; width: clamp(15px, calc(var(--sz, 80px) * .24), 26px); aspect-ratio: 1; border-radius: 50%; background: var(--c); border: 2.5px solid #FFFDF8; box-shadow: 0 0 0 1px rgba(43, 34, 48, .55); }
.ss-pt.is-out .ss-pt-in { transform: rotate(var(--rot, 0deg)) scale(.2); opacity: 0; }
.ss-pt.is-in .ss-pt-in { animation: ss-pop .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 24ms); }
@keyframes ss-pop { from { transform: rotate(var(--rot, 0deg)) translateY(26px) scale(.3); opacity: 0; } }
.ss-pt:hover .ss-pt-in, .ss-pt:focus-visible .ss-pt-in, .ss-pt.is-spot .ss-pt-in { transform: rotate(0deg) translateY(-9px) scale(1.14); }
.ss-pt:hover, .ss-pt:focus-visible, .ss-pt.is-spot { z-index: 1000 !important; }
.has-spot .ss-pt:not(.is-spot) { opacity: .5; }

.ss-tag { position: absolute; left: 0; top: 0; z-index: 500; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 7px; font: 700 12.5px/1.2 var(--sans); color: var(--ink); white-space: nowrap; text-transform: capitalize;
  background: rgba(255, 253, 248, .94); border: 1px solid rgba(43, 34, 48, .4); border-radius: 3px; pointer-events: none; transition: opacity .3s var(--ease); }
.ss-tag i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(43, 34, 48, .5); }
.ss-tag b { font-weight: 700; color: var(--ink-soft); }
.ss-tag.is-out { opacity: 0; }
.ss-tip { position: absolute; left: 0; top: 0; z-index: 2000; display: grid; gap: 1px; max-width: 230px; margin: 0; padding: 8px 13px 9px; pointer-events: none;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 4px 12px 5px 10px / 10px 5px 12px 4px; box-shadow: 0 8px 14px -8px rgba(43, 34, 48, .5); }
.ss-tip[hidden] { display: none; }
.ss-tip-b { font: 700 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--berry); }
.ss-tip-n { font: 400 17px/1.15 var(--serif); }
.ss-tip-s { font: 400 15px/1.3 var(--sans); }
.ss-tip-f { margin-top: 2px; font: 700 13px/1.3 var(--sans); color: var(--ink-soft); text-transform: capitalize; }

/* chips over the space */
.ss-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 3000; display: grid; justify-items: start; gap: 8px; padding: 10px 12px 0; pointer-events: none; }
.ss-bar > *, .ss-bar-row > * { pointer-events: auto; }
.ss-bar-row { display: flex; align-items: center; gap: 8px; }
.ss-chips, .ss-more { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-more { gap: 6px 16px; }
.ss-chip { min-height: 36px; padding: 0 14px; font: 700 15px/1 var(--sans); color: var(--ink); background: rgba(255, 253, 248, .93); border: 1.5px solid rgba(43, 34, 48, .34); border-radius: 999px; cursor: pointer; white-space: nowrap; }
.ss-chip:hover { border-color: var(--ink); }
.ss-chip[aria-pressed="true"], .ss-more-btn[aria-expanded="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.ss-chip.is-none { opacity: .45; cursor: default; }
.ss-chip--clear { color: var(--berry); background: transparent; border-style: dashed; }
.ss-chip--clear[hidden] { display: none; }
.ss-chip:focus-visible, .ss-btn:focus-visible, .ss-clear:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.ss-more-btn { display: none; }

.ss-hud { position: absolute; top: 10px; right: 12px; z-index: 3000; display: flex; gap: 6px; }
.ss-btn { min-height: 36px; padding: 0 14px; font: 700 15px/1 var(--sans); color: var(--ink); background: rgba(255, 253, 248, .93); border: 1.5px solid rgba(43, 34, 48, .4); border-radius: 999px; cursor: pointer; white-space: nowrap; }
.ss-btn:hover { border-color: var(--ink); }
.ss-btn[hidden] { display: none; }
.ss-round { width: 36px; padding: 0; font-size: 21px; }
.ss-btn[aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.ss-tilt { position: absolute; right: 12px; bottom: calc(var(--ss-b, 110px) + 40px); z-index: 3000; }
.ss-hint { position: absolute; left: 50%; top: var(--ss-t, 60px); z-index: 600; margin: 0; padding: 5px 12px; font: 700 14px/1.3 var(--sans); color: var(--ink); background: rgba(255, 253, 248, .92); border-radius: 999px; transform: translateX(-50%); transition: opacity .5s; pointer-events: none; white-space: nowrap; }
.ss-hint.off { opacity: 0; }
.ss-legend { position: absolute; right: 12px; bottom: calc(var(--ss-b, 110px) + 8px); z-index: 600; margin: 0; padding: 3px 9px; font: 400 13.5px/1.3 var(--sans); color: var(--ink-soft); background: rgba(255, 253, 248, .88); border-radius: 3px; pointer-events: none; }
.ss-empty { position: absolute; left: 50%; top: 48%; z-index: 600; margin: 0; padding: 10px 16px; font: 400 17px/1.3 var(--sans); text-align: center; background: rgba(255, 253, 248, .94); border-radius: 6px; transform: translate(-50%, -50%); }
.ss-empty[hidden] { display: none; }
.ss-clear { padding: 0; font: 700 17px/1.3 var(--sans); color: var(--berry); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* the strip from light to deep */
.ss-scrub { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3000; padding: 14px 14px 10px; background: linear-gradient(to top, var(--card) 78%, rgba(255, 253, 248, 0)); }
.ss-scrub-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.ss-scrub-k { font: 700 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.ss-range { width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ss-range:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
.ss-range::-webkit-slider-runnable-track { height: 18px; background: var(--strip, #ddd); border: 1.5px solid rgba(43, 34, 48, .6); border-radius: 3px 9px 4px 8px / 8px 4px 9px 3px; }
.ss-range::-moz-range-track { height: 15px; background: var(--strip, #ddd); border: 1.5px solid rgba(43, 34, 48, .6); border-radius: 3px 9px 4px 8px / 8px 4px 9px 3px; }
.ss-range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -8px; -webkit-appearance: none; appearance: none; background: #FFFDF8; border: 2.5px solid var(--ink); border-radius: 50%; box-shadow: 0 3px 5px -2px rgba(43, 34, 48, .55); }
.ss-range::-moz-range-thumb { width: 22px; height: 22px; background: #FFFDF8; border: 2.5px solid var(--ink); border-radius: 50%; box-shadow: 0 3px 5px -2px rgba(43, 34, 48, .55); }
.ss-range:disabled { opacity: .4; cursor: default; }
.ss-now-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.ss-now { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-width: 0; margin: 0; overflow: hidden; font: 400 15.5px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.ss-now b { font-weight: 700; }
.ss-dot { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(43, 34, 48, .5); }
.ss-open { flex: none; }

/* a wide screen with a mouse */
@media (min-width: 760px) {
  .ss-scrub { padding: 16px 20px 12px; }
}
/* a phone: the frame runs edge to edge, the second row of chips opens from one button, and every control is 44px tall */
@media (max-width: 759px) {
  .ss-frame { height: 610px; margin-inline: calc(-1 * var(--gutter)); border-width: 2px 0; border-radius: 0; }
  .ss-hud { display: none; }
  .ss-bar { position: absolute; padding: 8px 10px 0; gap: 0; }
  .ss-bar-row { flex-wrap: wrap; gap: 6px; }
  .ss-chip, .ss-btn { min-height: 44px; }
  .ss-chip { padding: 0 13px; }
  .ss-more-btn { display: inline-flex; align-items: center; }
  .ss-more { display: none; }
  .ss-bar.is-open .ss-more { position: absolute; top: calc(100% + 6px); left: 10px; right: 10px; z-index: 3100; display: grid; gap: 10px; padding: 12px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 4px 14px 5px 12px / 12px 5px 14px 4px; box-shadow: 0 12px 18px -10px rgba(43, 34, 48, .55); }
  .ss-hint { top: calc(var(--ss-t, 60px) + 4px); }
  .ss-legend { right: auto; left: 12px; bottom: calc(var(--ss-b, 110px) + 6px); }
  .ss-scrub { padding: 12px 12px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-pt, .ss-pt-in, .ss-tag, .ss-hint { transition: none; }
  .ss-pt.is-in .ss-pt-in { animation: none; }
}
@media (forced-colors: active) {
  .ss-pt-chip, .ss-tag i, .ss-dot { forced-color-adjust: none; }
  .ss-chip[aria-pressed="true"] { background: Highlight; color: HighlightText; }
}