/* site-picker/picker.css - styles for the /buy website + palette picker. Self-contained (every rule is under .sp). No motion:
   hover and focus change colour / outline only. Scoped custom properties so buy.html's own styles are untouched. */
.sp { --sp-ink: #1f2937; --sp-muted: #5b6474; --sp-line: #d9dee7; --sp-focus: #1d4ed8; --sp-panel: #f5f7fa; --sp-check: #1d4ed8; font-family: inherit; color: var(--sp-ink); }
.sp .sp-fieldset { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.sp .sp-legend { font-weight: 700; font-size: 17px; padding: 0; margin: 0 0 10px; }
.sp .sp-radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* website cards */
.sp .sp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sp .sp-card-wrap { position: relative; }
/* the host page may style every <label> (buy.html: bold + a top margin); the cards and swatches are labels, so they reset both */
.sp .sp-card, .sp .sp-swatch { margin: 0; font-weight: 400; font-size: inherit; color: var(--sp-ink); }
.sp .sp-card { display: block; border: 2px solid var(--sp-line); border-radius: 10px; padding: 10px; background: #fff; cursor: pointer; height: 100%; }
.sp .sp-card:hover { border-color: var(--sp-muted); }
.sp .sp-card-wrap.is-checked .sp-card { border-color: var(--sp-check); background: var(--sp-panel); }
.sp .sp-radio:focus-visible + .sp-card, .sp .sp-radio:focus-visible + .sp-swatch { outline: 3px solid var(--sp-focus); outline-offset: 2px; }
.sp .sp-card-title { display: block; font-weight: 700; font-size: 15px; margin: 8px 0 2px; }
.sp .sp-card-desc { display: block; font-size: 13px; font-weight: 400; color: var(--sp-muted); line-height: 1.35; }
/* wireframes (pure CSS, aria-hidden) */
.sp .sp-wire { display: grid; gap: 3px; aspect-ratio: 16 / 10; background: #fff; border: 1px solid var(--sp-line); border-radius: 6px; padding: 5px; grid-auto-rows: minmax(0, 1fr); }
.sp .sp-wire i { display: block; background: #cfd6e2; border-radius: 2px; min-height: 0; }
.sp .sp-wire-1 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 3fr 1.2fr 2fr 1fr; }
.sp .sp-wire-1 .sp-w-head { grid-column: 1 / -1; background: #e3e8f0; }
.sp .sp-wire-1 .sp-w-hero-l { grid-column: 1 / 3; background: #e9edf3; }
.sp .sp-wire-1 .sp-w-hero-r { grid-column: 3; background: #1f3c88; }
.sp .sp-wire-1 .sp-w-band { grid-column: 1 / -1; background: #eef2f9; }
.sp .sp-wire-1 .sp-w-grid { background: #e3e8f0; }
.sp .sp-wire-1 .sp-w-foot { grid-column: 1 / -1; background: #17213a; }
.sp .sp-wire-2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr 3fr 1.5fr 1.5fr 1fr; }
.sp .sp-wire-2 .sp-w-head { grid-column: 1 / -1; background: #e3e8f0; }
.sp .sp-wire-2 .sp-w-band-big { grid-column: 1 / -1; background: #1b5e4f; }
.sp .sp-wire-2 .sp-w-col { background: #eef3f0; }
.sp .sp-wire-2 .sp-w-list { grid-column: 1 / -1; background: #e3e8f0; }
.sp .sp-wire-2 .sp-w-foot { grid-column: 1 / -1; background: #12463a; }
.sp .sp-wire-3 { grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 3fr 1fr 1fr 1fr 1fr; }
.sp .sp-wire-3 .sp-w-head { grid-column: 1 / -1; background: #e3e8f0; }
.sp .sp-wire-3 .sp-w-card-l { background: #0b5fa5; }
.sp .sp-wire-3 .sp-w-card-r { background: #f1f5f9; }
.sp .sp-wire-3 .sp-w-row { grid-column: 1 / -1; background: #e3e8f0; }
.sp .sp-wire-3 .sp-w-foot { grid-column: 1 / -1; background: #101418; }
/* palette dots */
.sp .sp-dots { display: flex; flex-wrap: wrap; gap: 14px 18px; }
.sp .sp-swatch-wrap { position: relative; }
.sp .sp-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; width: 84px; text-align: center; }
.sp .sp-dot { display: block; position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--sp-swatch); box-shadow: inset 0 0 0 4px var(--sp-swatch-2), 0 0 0 2px var(--sp-line); }
.sp .sp-dot::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%; background: var(--sp-swatch-accent, transparent); box-shadow: 0 0 0 2px #fff; }   /* r2: the metallic accent */
.sp .sp-swatch:hover .sp-dot { box-shadow: inset 0 0 0 4px var(--sp-swatch-2), 0 0 0 2px var(--sp-muted); }
.sp .sp-swatch-wrap.is-checked .sp-dot { box-shadow: inset 0 0 0 4px var(--sp-swatch-2), 0 0 0 3px var(--sp-check); }
.sp .sp-swatch-name { font-size: 12px; line-height: 1.25; color: var(--sp-ink); }
.sp .sp-swatch-wrap.is-checked .sp-swatch-name { font-weight: 700; }
/* logo cards (F-6): the live wordmark on white + the round favicon, redrawn as the name / colours change */
.sp .sp-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sp .sp-logo-row { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 6px 4px; background: #fff; border: 1px solid var(--sp-line); border-radius: 6px; }
.sp .sp-logo-art { display: block; flex: 1 1 auto; min-width: 0; }
.sp .sp-logo-art svg { display: block; width: 100%; height: auto; max-height: 56px; }
.sp .sp-logo-fav { display: block; flex: 0 0 auto; width: 34px; height: 34px; }
.sp .sp-logo-fav svg { display: block; width: 34px; height: 34px; }
/* preview */
.sp .sp-preview { margin-top: 6px; }
.sp .sp-preview-title { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.sp .sp-frame-box { --sp-scale: 0.4; position: relative; width: 100%; overflow: hidden; border: 1px solid var(--sp-line); border-radius: 10px; background: #fff; }
.sp .sp-frame { width: 1440px; height: 900px; border: 0; transform: scale(var(--sp-scale)); transform-origin: 0 0; pointer-events: none; display: block; }
.sp .sp-caption { font-size: 13px; color: var(--sp-muted); margin: 8px 0 4px; }
.sp .sp-open { font-size: 14px; font-weight: 600; color: var(--sp-focus); }
.sp .sp-open:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .sp .sp-cards, .sp .sp-logos { grid-template-columns: 1fr; }
  .sp .sp-swatch { width: 72px; }
}