/* Greybox Settings — /settings view.
 * 1:1 structural port of cinejoy.pk/settings rendered in the Greybox theme:
 * black canvas + glow-white active states, ZERO accent/gold on this page.
 * Ported pieces (class names namespaced to .gxset-*):
 *   - sticky section nav (.gxset-nav) that docks into a glass pill on scroll
 *     (.is-docked), underline tabs (.gxset-tab / .is-active), scroll-spy
 *   - stacked glass cards (.gxset-card, .is-flash ring on change)
 *   - section header (title + subtitle) over a setting-row list
 *     (label+description left, control right, hairline row separators)
 *   - segmented pill control with sliding white slider (.gxset-segment),
 *     44x24 toggle with glow-white ON state (.gxset-switch), pill buttons
 * Theme/card-size switches live as <html data-theme|data-cards> overrides in
 * css/tokens.css (booted by the inline head script + js/settings.js).
 * Body mode: solid backdrop behind the page (hero + list chrome are hidden
 * via js/settings.js COVERED, same contract as css/sports.css).
 * The reduce-motion blanket at the bottom is the CSS half of the Appearance
 * toggle (the JS half: hero/footer/shelves/smooth-scroll matchMedia guards
 * read <html data-motion="reduced"> too). */

/* ---------------- page palette (theme-aware) ---------------- */
body.gx-settings-mode { background: #0a0b0f; }
html[data-theme="amoled"] body.gx-settings-mode { background: #000; }
html[data-theme="light"] body.gx-settings-mode { background: #f1f2f4; }

#settings-page {
  --gxset-card-bg: rgba(20, 20, 22, 0.6);
  --gxset-card-border: rgba(255, 255, 255, 0.08);
  --gxset-hi: rgba(255, 255, 255, 0.95);
  --gxset-mid: rgba(255, 255, 255, 0.65);
  --gxset-line: rgba(255, 255, 255, 0.08);
  --gxset-wash: rgba(255, 255, 255, 0.06);
  --gxset-wash-2: rgba(255, 255, 255, 0.1);
  --gxset-line-2: rgba(255, 255, 255, 0.1);
  --gxset-ring: rgba(255, 255, 255, 0.55);
  --gxset-dock-bg: rgba(12, 12, 14, 0.55);
  --gxset-dock-shadow: inset 0 1px rgba(255, 255, 255, 0.07), 0 8px 30px rgba(0, 0, 0, 0.35);
  --gxset-seg-bg: rgba(255, 255, 255, 0.1);
  --gxset-seg-border: rgba(255, 255, 255, 0.1);
  --gxset-seg-active-bg: #f4f3ee;
  --gxset-seg-active-text: #101015;
  --gxset-toggle-on-bg: #f4f3ee;
  --gxset-toggle-on-border: #f4f3ee;
  --gxset-toggle-on-glow: 0 0 14px rgba(255, 255, 255, 0.35);
  --gxset-knob: rgba(255, 255, 255, 0.7);
  --gxset-knob-on: #0b0b10;
  --gxset-input-bg: rgba(255, 255, 255, 0.06);
}

html[data-theme="amoled"] #settings-page {
  --gxset-card-bg: rgba(0, 0, 0, 0.68);
  --gxset-dock-bg: rgba(0, 0, 0, 0.62);
}

html[data-theme="light"] #settings-page {
  --gxset-card-bg: rgba(255, 255, 255, 0.72);
  --gxset-card-border: rgba(0, 0, 0, 0.08);
  --gxset-hi: rgba(16, 17, 20, 0.95);
  --gxset-mid: rgba(20, 21, 26, 0.62);
  --gxset-line: rgba(0, 0, 0, 0.08);
  --gxset-wash: rgba(0, 0, 0, 0.045);
  --gxset-wash-2: rgba(0, 0, 0, 0.06);
  --gxset-line-2: rgba(0, 0, 0, 0.12);
  --gxset-ring: rgba(16, 17, 20, 0.45);
  --gxset-dock-bg: rgba(255, 255, 255, 0.75);
  --gxset-dock-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 8px 30px rgba(0, 0, 0, 0.12);
  --gxset-seg-bg: rgba(0, 0, 0, 0.055);
  --gxset-seg-border: rgba(0, 0, 0, 0.1);
  --gxset-seg-active-bg: #15161a;
  --gxset-seg-active-text: #f4f3ee;
  --gxset-toggle-on-bg: #15161a;
  --gxset-toggle-on-border: #15161a;
  --gxset-toggle-on-glow: 0 0 12px rgba(0, 0, 0, 0.28);
  --gxset-knob: rgba(255, 255, 255, 0.85);
  --gxset-knob-on: #f4f3ee;
  --gxset-input-bg: rgba(255, 255, 255, 0.75);
}

/* ---------------- page shell ---------------- */
.gxset-page {
  padding: 124px 20px 96px;
  min-height: calc(100vh - 74px);
  animation: gxset-rise .4s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes gxset-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.gxset-shell {
  /* width: 100% is load-bearing: with margin-inline: auto the grid item
   * does not stretch, so it would size to fit-content — whose min-content
   * floor (the ~515px nowrap tab row) survives min-width: 0 and blows past
   * a phone-width track, where body overflow-x: clip then amputates the
   * right edge of every card. A definite width bypasses that floor; the
   * 780px cap still applies and auto margins still center it when the
   * track is wider (rails hidden, 860–1099px tier). */
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  min-width: 0;
}

/* ---- page layout with ad side rails (Admin -> Ads placements
 * settings-left / settings-right) ----
 * [ad rail | centered 780px shell | ad rail] — same idea as the search
 * hero: the flanks are REAL grid columns capped by the site's --gx-max
 * column, so a mounted rail ad (sticky, inside its own column — see
 * css/ads.css .gxad-rail--sticky) can never overlap the settings UI. The
 * shell keeps its exact centered look with no ad mounted. Rails hide below
 * 1100px, where the flanks stop being flanks. */
.gxset-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 780px) minmax(0, 1fr);
  gap: clamp(12px, 2.4vw, 32px);
  align-items: start;
  max-width: var(--gx-max);
  margin-inline: auto;
}

@media (max-width: 1099px) {
  .gxset-layout { grid-template-columns: minmax(0, 1fr); }
  .gxset-layout .gxad-rail { display: none; }
}

/* ---------------- title ---------------- */
.gxset-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.gxset-head-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  background: var(--gxset-wash-2);
  border: 1px solid var(--gxset-line);
  color: var(--gxset-hi);
}

.gxset-head-mark svg { width: 18px; height: 18px; }

.gxset-h1 {
  font: 600 clamp(1.7rem, 3.6vw, 2.4rem)/1.1 "Space Grotesk", sans-serif;
  color: var(--gxset-hi);
  letter-spacing: -.02em;
  margin: 0;
}

/* ---------------- sticky section nav ----------------
 * cinejoy: sticky pill that docks (glass fill + hairline) once it pins
 * under the site header, underline tabs, smooth in-page jumps. */
.gxset-nav {
  position: sticky;
  top: 70px;
  z-index: 30;
  display: flex;
  justify-content: center;
  gap: 1.75rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 24px;
  padding: 0 .25rem;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid transparent;
  border-radius: 9999px;
  transition: padding .26s cubic-bezier(.4, 0, .2, 1),
              background-color .26s ease, border-color .26s ease, box-shadow .26s ease;
}

.gxset-nav::-webkit-scrollbar { display: none; }

.gxset-nav.is-docked {
  padding: .25rem 1.25rem;
  background: var(--gxset-dock-bg);
  border-color: var(--gxset-line);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--gxset-dock-shadow);
}

.gxset-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: none;
  padding: .5rem 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--gxset-mid);
  font: 500 .875rem/1 "Space Grotesk", sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}

.gxset-tab svg { width: 16px; height: 16px; flex: none; }

.gxset-tab:hover { color: var(--gxset-hi); }

.gxset-tab.is-active {
  color: var(--gxset-hi);
  border-bottom-color: var(--gxset-hi);
}

/* ---------------- cards ---------------- */
.gxset-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.gxset-card {
  background: var(--gxset-card-bg);
  border: 1px solid var(--gxset-card-border);
  border-radius: 20px;
  padding: 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  scroll-margin-top: 148px;
  transition: box-shadow .35s ease;
}

.gxset-card.is-flash { box-shadow: 0 0 0 1px var(--gxset-ring); }

.gxset-card-head { margin-bottom: 20px; }

.gxset-section-title {
  font: 600 1.1rem/1.25 "Space Grotesk", sans-serif;
  color: var(--gxset-hi);
  margin: 0;
}

.gxset-section-sub {
  font-size: .85rem;
  color: var(--gxset-mid);
  margin: 2px 0 0;
  line-height: 1.45;
}

/* ---------------- setting rows ---------------- */
.gxset-list { display: flex; flex-direction: column; }

.gxset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
}

.gxset-row + .gxset-row { border-top: 1px solid var(--gxset-line); }

.gxset-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 65%;
  min-width: 0;
}

.gxset-title { font-size: .95rem; font-weight: 500; color: var(--gxset-hi); }

.gxset-desc { font-size: .8rem; color: var(--gxset-mid); line-height: 1.4; }

.gxset-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.gxset-status {
  min-height: 1.1em;
  margin-top: 10px;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--gxset-mid);
}

/* ---------------- segmented pill (sliding white slider) ---------------- */
.gxset-segment {
  display: flex;
  position: relative;
  padding: 4px;
  background: var(--gxset-seg-bg);
  border: 1px solid var(--gxset-seg-border);
  border-radius: 999px;
}

.gxset-seg-slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  background: var(--gxset-seg-active-bg);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: left .35s cubic-bezier(.16, 1, .3, 1), width .35s cubic-bezier(.16, 1, .3, 1);
  z-index: 0;
  pointer-events: none;
}

.gxset-seg-btn {
  position: relative;
  z-index: 1;
  appearance: none;
  padding: 6px 14px;
  border: none;
  border-radius: 999px;
  background: none;
  font: 500 .75rem/1 "Space Grotesk", sans-serif;
  white-space: nowrap;
  color: var(--gxset-mid);
  cursor: pointer;
  transition: color .25s ease;
}

.gxset-seg-btn:hover:not(.is-active) { color: var(--gxset-hi); }

.gxset-seg-btn.is-active {
  color: var(--gxset-seg-active-text);
  font-weight: 600;
}

/* ---------------- toggle (glow-white ON) ---------------- */
.gxset-switch {
  appearance: none;
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  background: var(--gxset-wash-2);
  border: 1px solid var(--gxset-line-2);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.gxset-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  height: 18px;
  width: 18px;
  border-radius: 999px;
  background: var(--gxset-knob);
  transition: transform .2s cubic-bezier(.175, .885, .32, 1.275), background .2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.gxset-switch[aria-checked="true"] {
  background: var(--gxset-toggle-on-bg);
  border-color: var(--gxset-toggle-on-border);
  box-shadow: var(--gxset-toggle-on-glow);
}

.gxset-switch[aria-checked="true"] .gxset-knob {
  transform: translateX(20px);
  background: var(--gxset-knob-on);
}

/* ---------------- pill buttons ---------------- */
.gxset-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  font: 600 .8rem/1 "Space Grotesk", sans-serif;
  padding: 8px 16px;
  min-height: 34px;
  cursor: pointer;
  border: 1px solid var(--gxset-line-2);
  background: var(--gxset-wash);
  color: var(--gxset-hi);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.gxset-btn:hover { background: var(--gxset-wash-2); }

.gxset-btn.is-danger {
  background: rgba(220, 60, 60, 0.14);
  border-color: rgba(220, 60, 60, 0.34);
  color: #f2b8b8;
}

.gxset-btn.is-danger:hover { background: rgba(220, 60, 60, 0.22); }

.gxset-btn.is-confirm {
  background: #c8342f;
  border-color: #e0554f;
  color: #fff;
}

.gxset-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--gxset-ring);
}

.gxset-switch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--gxset-ring); }

/* ---------------- input (region) ---------------- */
.gxset-input {
  appearance: none;
  width: 84px;
  background: var(--gxset-input-bg);
  border: 1px solid var(--gxset-line-2);
  border-radius: 10px;
  color: var(--gxset-hi);
  font: 500 .85rem/1 "DM Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 10px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.gxset-input::placeholder { color: var(--gxset-mid); }

.gxset-input:focus {
  border-color: var(--gxset-ring);
  box-shadow: 0 0 0 3px var(--gxset-wash-2);
}

/* ---------------- responsive ---------------- */
@media (max-width: 640px) {
  .gxset-card { padding: 20px; }
  .gxset-meta { max-width: 60%; }
}

@media (max-width: 859px) {
  .gxset-page { padding: 108px 12px 110px; }
  .gxset-nav { justify-content: flex-start; margin-inline: 0; }
  .gxset-nav.is-docked { margin-inline: 0; }
}

@media (max-width: 420px) {
  .gxset-page { padding-top: 96px; }
  .gxset-row { flex-wrap: wrap; }
  .gxset-meta { max-width: 100%; }
  .gxset-control { width: 100%; justify-content: flex-start; }
}

/* The cursor row is a full-width preview-tile grid (4 cards across + a
 * spanning Default row) — far wider than the side-by-side control column
 * next to the description — so it stacks at EVERY width (the same wrap the
 * generic rows do at 420px). Theme / Card size keep their side-by-side
 * layout until 680px. */
.gxset-row--cursor { flex-wrap: wrap; }
.gxset-row--cursor .gxset-meta { max-width: 100%; }
.gxset-row--cursor .gxset-control { width: 100%; justify-content: flex-start; }

/* Phones and tablets have no cursor to style (and phone-narrow windows make
 * the pack picker pointless): hide the whole cursor row on touch-first
 * devices and small screens — real pointers on desktop keep it. */
@media (max-width: 700px), (hover: none), (pointer: coarse) {
  .gxset-row--cursor { display: none; }
}

@media (max-width: 680px) {
  .gxset-row--seg { flex-wrap: wrap; }
  .gxset-row--seg .gxset-meta { max-width: 100%; }
  .gxset-row--seg .gxset-control { width: 100%; justify-content: flex-start; }
}

/* ---------------- reduce motion (Appearance toggle, CSS half) ----------------
 * Set by js/settings.js as <html data-motion="reduced"> (persisted in
 * greybox:reduce-motion). Blanket-suppresses every CSS animation/transition
 * site-wide; the JS half keeps hero/footer/shelves/smooth-scroll from
 * starting motion work at boot. */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  .gxset-page { animation: none; }
  .gxset-seg-slider, .gxset-switch, .gxset-knob, .gxset-btn { transition: none; }
}

/* ---------------- custom cursors (self-hosted, ONE state) ----------------
 * Art from custom-cursor.com (BLife Team fan art), self-hosted under
 * /cursors/. Every pack ships TWO images — <pack>-cursor.png and
 * <pack>-pointer.png — and BOTH are offered as picks in a single Cursor
 * row. Whichever art the user picks paints EVERY element, rest AND hover
 * alike, so moving over a link/button/card never swaps the image:
 *   <html data-cursor="...">  everywhere — Settings -> Appearance ->
 *                                             Cursor (greybox:cursor)
 * Set pre-paint by the inline head script in index.html (contact.html and
 * disclaimer.html carry the same snippet) and re-applied by js/settings.js.
 * Values:
 *   system             — browser default: UA arrow/hand, NO art — only when
 *                        the user explicitly picks Default (data-cursor=
 *                        "system" matches no pack rule below)
 *   mochi             — "Peach and Goma Watching a Movie" (pack 13985)
 *   bocchi            — "Bocchi the Rock! Hitori Gotoh and her Guitar" (13888)
 *   pikachu           — "Pokemon Horizons: The Series Captain Pikachu" (13722)
 *   batman            — "The LEGO Batman Movie" (pack 1542)
 *   <pack>-pointer    — the same pack's pointer art, usable as the cursor
 *   mochi is the DEFAULT for any browser that has never picked an art;
 *   js/settings.js and the head snippet migrate the old implicit 'system'
 *   default onto it once (greybox:cursor-v2 marks the switch).
 * The pack rules are keyed on `:root[data-cursor=x]` (a pseudo-class plus
 * the attribute = 0,2,0) instead of plain `html[data-cursor=x] *` (0,1,1)
 * on purpose: several sheets declare their own `cursor: pointer` at 0,1,1
 * (footer links, downloads selects, Tailwind's `button`) and footer.css /
 * downloads.css load AFTER this file, so at 0,1,1 they would repaint the
 * system hand over those elements the moment the pointer arrived — the
 * exact flicker this row exists to prevent. PNG cursors are honoured by
 * Chromium/Firefox desktop; any browser that rejects them falls back to
 * the second keyword. Touch devices never paint a pointer, so mobile is
 * unaffected.
 *
 * CONTROL: a preview-tile grid — the pattern colour/wallpad/emoji pickers
 * use (one card per option, art on top, name under it, the whole card is
 * the target). Nine mini-pill tiles in one flex row was cramped and a
 * sliding bar cannot follow anything but a single line, so the slider is
 * dropped for per-tile active state. Grid is 4 columns (2 rows) at every
 * width above 459px, 2 columns below — both divide nine evenly minus the
 * Default button, which spans its own row; nothing ever splits or goes
 * ragged. Preview fill is chosen per art (dark art -> light tile, light
 * art -> dark tile) so it keeps contrast on the dark card AND on the white
 * active state, in either theme; an inset hairline defines the tile edge
 * either way. The active card flips to the glow-white active pill used by
 * every other control on this page; "Default" shows a bare currentColor
 * arrow (no custom art to show) and stretches across the last row. */
#gxset-cursor-seg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

#gxset-cursor-seg .gxset-seg-slider { display: none; }

#gxset-cursor-seg .gxset-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 6px 10px;
  border: 1px solid var(--gxset-seg-border);
  border-radius: 16px;
  background: var(--gxset-seg-bg);
  text-align: center;
}

#gxset-cursor-seg .gxset-tile .gxset-seg-ico {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background-size: 32px 32px;
  image-rendering: pixelated;
}

.gxset-tile-name { font-size: .72rem; line-height: 1; }

/* no sliding bar, so the active card paints its own glow-white pill */
#gxset-cursor-seg .gxset-tile.is-active {
  background: var(--gxset-seg-active-bg);
  border-color: var(--gxset-seg-active-bg);
  color: var(--gxset-seg-active-text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#gxset-cursor-seg .gxset-tile:hover:not(.is-active) {
  background: var(--gxset-wash-2);
  border-color: var(--gxset-line-2);
}

/* "Default" = system cursor: a labelled pill spanning its own row */
#gxset-cursor-seg .gxset-system {
  display: flex;
  grid-column: 1 / -1;
  justify-self: start;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--gxset-seg-border);
  border-radius: 999px;
  background: var(--gxset-seg-bg);
}

#gxset-cursor-seg .gxset-system .gxset-seg-ico { width: 17px; height: 17px; }

#gxset-cursor-seg .gxset-system.is-active {
  background: var(--gxset-seg-active-bg);
  border-color: var(--gxset-seg-active-bg);
  color: var(--gxset-seg-active-text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#gxset-cursor-seg .gxset-system:hover:not(.is-active) {
  background: var(--gxset-wash-2);
  border-color: var(--gxset-line-2);
}

/* Phones: two columns, so a card never drops under ~100px (the four-up
 * grid would squeeze "Pikachu" past its card at ~360px). */
@media (max-width: 459px) {
  #gxset-cursor-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #gxset-cursor-seg .gxset-tile { padding: 10px 4px 9px; }
  #gxset-cursor-seg .gxset-tile .gxset-seg-ico { width: 40px; height: 40px; border-radius: 12px; }
  .gxset-tile-name { font-size: .68rem; }
}

.gxset-seg-ico {
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 13px 13px;
}

.gxset-seg-ico--plain { background: none; fill: currentColor; }

/* light art (Mochi cream, Pikachu yellow, Bocchi's pink hair) reads on a
 * dark tile */
.gxset-seg-ico[data-ico="mochi"],
.gxset-seg-ico[data-ico="mochi-pointer"],
.gxset-seg-ico[data-ico="pikachu"],
.gxset-seg-ico[data-ico="pikachu-pointer"],
.gxset-seg-ico[data-ico="bocchi-pointer"] {
  background-color: #14141a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* dark art (Bocchi's guitar, Batman's batarang and mask) reads on a light tile */
.gxset-seg-ico[data-ico="bocchi"],
.gxset-seg-ico[data-ico="batman"],
.gxset-seg-ico[data-ico="batman-pointer"] {
  background-color: #edeff3;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}

/* Segment preview swatch = the art that pick paints site-wide */
.gxset-seg-ico[data-ico="mochi"] { background-image: url("/cursors/mochi-cursor.png"); }
.gxset-seg-ico[data-ico="mochi-pointer"] { background-image: url("/cursors/mochi-pointer.png"); }
.gxset-seg-ico[data-ico="bocchi"] { background-image: url("/cursors/bocchi-cursor.png"); }
.gxset-seg-ico[data-ico="bocchi-pointer"] { background-image: url("/cursors/bocchi-pointer.png"); }
.gxset-seg-ico[data-ico="pikachu"] { background-image: url("/cursors/pikachu-cursor.png"); }
.gxset-seg-ico[data-ico="pikachu-pointer"] { background-image: url("/cursors/pikachu-pointer.png"); }
.gxset-seg-ico[data-ico="batman"] { background-image: url("/cursors/batman-cursor.png"); }
.gxset-seg-ico[data-ico="batman-pointer"] { background-image: url("/cursors/batman-pointer.png"); }

/* the pick — same art at rest and on hover, so nothing flips mid-move */
:root[data-cursor="mochi"],
:root[data-cursor="mochi"] * {
  cursor: url("/cursors/mochi-cursor.png"), auto;
}
:root[data-cursor="mochi-pointer"],
:root[data-cursor="mochi-pointer"] * {
  cursor: url("/cursors/mochi-pointer.png"), auto;
}
:root[data-cursor="bocchi"],
:root[data-cursor="bocchi"] * {
  cursor: url("/cursors/bocchi-cursor.png"), auto;
}
:root[data-cursor="bocchi-pointer"],
:root[data-cursor="bocchi-pointer"] * {
  cursor: url("/cursors/bocchi-pointer.png"), auto;
}
:root[data-cursor="pikachu"],
:root[data-cursor="pikachu"] * {
  cursor: url("/cursors/pikachu-cursor.png"), auto;
}
:root[data-cursor="pikachu-pointer"],
:root[data-cursor="pikachu-pointer"] * {
  cursor: url("/cursors/pikachu-pointer.png"), auto;
}
:root[data-cursor="batman"],
:root[data-cursor="batman"] * {
  cursor: url("/cursors/batman-cursor.png"), auto;
}
:root[data-cursor="batman-pointer"],
:root[data-cursor="batman-pointer"] * {
  cursor: url("/cursors/batman-pointer.png"), auto;
}

/* Text fields keep the I-beam: one type selector above the pack rules
 * (0,2,1 vs 0,2,0), so the pack never steals the caret cursor. */
:root[data-cursor] input,
:root[data-cursor] textarea {
  cursor: text;
}