/* The graphic and caption style pickers (js/style-picker.js): five or four soft tiles in one row at desktop width,
 * two columns on a phone. A tile plays its style while pointed at, focused or tapped. Stage tokens only. */
.sp-grid { --n: 5; display: grid; gap: 12px; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); max-width: none; }
@media (max-width: 1180px) { .sp-grid { grid-template-columns: repeat(min(var(--n), 4), minmax(0, 1fr)); } }
/* A phone: one row that scrolls sideways (snap), so the page stays short; the edge tile peeks to say there is more. */
@media (max-width: 680px) {
  .sp-grid { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--pad-card, 20px)); padding: 2px var(--pad-card, 20px) 6px;
    scrollbar-width: none; overscroll-behavior-x: contain; }
  .sp-grid::-webkit-scrollbar { display: none; }
  .sp-grid > .sp-tile { flex: 0 0 46%; scroll-snap-align: start; }
}

html[data-look] .sp-tile.be-cap {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 6px 6px 10px; text-align: left;
  background: var(--s-card, var(--dk-paper, #fff)); border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--s-line, rgba(31,31,33,.1));
  color: var(--s-ink, var(--dk-ink, #1F1F21)); cursor: pointer; transition: box-shadow .16s var(--s-ease, ease), transform .16s var(--s-ease, ease);
}
html[data-look] .sp-tile.be-cap:hover { box-shadow: inset 0 0 0 1px rgba(31, 31, 33, .22), var(--s-shadow); }
html[data-look] .sp-tile.be-cap.is-on { background: var(--s-card, var(--dk-paper, #fff)); box-shadow: inset 0 0 0 2px var(--s-ink, var(--dk-l-1f1f21, #1F1F21)); }
html[data-look] .sp-tile.be-cap:focus-visible { outline: 2px solid var(--s-peri, #8799C3); outline-offset: 2px; }
.sp-media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: var(--s-shell, var(--dk-b-efede7, #EFEDE7)); }
.sp-media img, .sp-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-media video { opacity: 0; transition: opacity .18s var(--s-ease, ease); }
.sp-tile.is-playing .sp-media video { opacity: 1; }
.sp-media--frame .be-cap-frame { position: absolute; inset: 0; border-radius: 0; }
.sp-text { display: grid; gap: 2px; padding: 0 4px; }
.sp-text strong { font: 500 13px/1.3 var(--v-font); color: var(--s-ink, var(--dk-ink, #1F1F21)); }
.sp-text small { font: 400 12px/1.4 var(--v-font); color: var(--s-ink-2, var(--dk-t-636366, #636366)); }
.sp-check {
  position: absolute; top: 12px; right: 12px; display: none; place-items: center; width: 20px; height: 20px; border-radius: 999px;
  background: var(--s-ink, var(--dk-inv, #1F1F21)); color: var(--dk-oninv, #fff); box-shadow: 0 0 0 2px var(--dk-paper, #fff);
}
.sp-tile.is-on .sp-check { display: grid; }
/* The caption frames animate while previewed (css/brand-editors.css animates :hover and .is-on; focus and tap join here). */
@media (prefers-reduced-motion: no-preference) {
  .be-cap.is-preview .be-cap-frame--sweep .be-cap-w.is-accent::before,
  .be-cap.is-preview .be-cap-frame--rule .be-cap-plate::after { animation: be-sweep 2.4s var(--ease, ease) infinite; }
  .be-cap.is-preview .be-cap-frame--tracked .be-cap-w::before { animation: be-track 2.4s linear infinite; animation-delay: calc(var(--n) * 0.4s); }
  .be-cap.is-preview .be-cap-frame--pop .be-cap-w { animation: be-pop 2.4s ease infinite; animation-delay: calc(var(--n) * 0.3s); }
}

/* "More styles": Terminal and Playful, one quiet row under the main five (Parker 2026-10-15). */
.sp-more { margin-top: 12px; }
.sp-more > summary { display: inline-flex; align-items: baseline; gap: 8px; padding: 4px 2px; cursor: pointer; list-style: none; font: 500 13px/1.3 var(--v-font); color: var(--dk-tx-s-peri-deep, var(--s-peri-deep)); }
.sp-more > summary::-webkit-details-marker { display: none; }
.sp-more > summary::after { content: ''; align-self: center; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.sp-more[open] > summary::after { transform: rotate(-135deg); }
.sp-more > summary small { font: 400 12px/1.3 var(--v-font); color: var(--s-ink-2); }
.sp-more > summary:focus-visible { outline: 2px solid var(--s-peri); outline-offset: 2px; border-radius: 6px; }
.sp-more > .sp-grid { margin-top: 10px; }
/* A tile being previewed (pointed at, focused, tapped) gets a periwinkle ring, apart from the chosen one's charcoal ring. */
html[data-look] .sp-tile.be-cap.is-preview:not(.is-on) { box-shadow: inset 0 0 0 2px var(--s-peri), var(--s-shadow); }