/* =========================================================================
   Sealed — the catalogue (/sealed/catalogue), product pages and the vault.

   Cardmarket's files carry no product photos, so every product is drawn:
   its kind as an illustration (templates/sealed/_art_sprite.html) in its
   era's tint, with the set's own logo printed on the front. The tint comes
   in as --tone; everything else derives from it, so the grid reads as one
   shelf of real, differently coloured boxes.

   Motion moves only transform/opacity, never loops a background, and stops
   for reduced motion.
   ========================================================================= */

.sl {
  --sl-card: linear-gradient(180deg, rgba(40, 43, 50, 0.62), rgba(23, 25, 29, 0.46));
  --sl-hair: rgba(255, 255, 255, 0.08);
  --sl-up: #5de3b0; --sl-down: #ff8b8b;
  --sl-rainbow: linear-gradient(90deg, #ff9fc4, #ffe08a 20%, #8fe9a6 40%, #9fe3f5 60%, #cec6f6 80%, #ff9fc4);
  --sl-sticker: repeating-linear-gradient(128deg, rgba(255, 255, 255, 0.4) 0 1.5px, transparent 1.5px 4.5px),
                linear-gradient(112deg, #fbfdff 0%, #cdefff 18%, #f5d8ff 38%, #fff2c2 56%, #caffea 76%, #eef8ff 100%);
  display: block; min-width: 0;
}
:root[data-theme="light"] .sl {
  --sl-card: #ffffff; --sl-hair: rgba(20, 24, 28, 0.09);
  --sl-up: #0f7a5c; --sl-down: #b8483f;
}
.sl a { text-decoration: none; }
:root[data-theme="light"] .sl .eyebrow { color: var(--ice-deep); }
.sl .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sl-up { color: var(--sl-up); }
.sl-down { color: var(--sl-down); }
.sl-d { display: inline-flex; align-items: baseline; gap: 0.15em; font-weight: 800; white-space: nowrap;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.sl-d i { font-style: normal; font-size: 0.72em; }

/* ------------------------------------------------------------ product art */
.sl-art {
  --tone: #bfe8f7;
  --sl-body: color-mix(in srgb, var(--tone) 38%, #15161b);
  --sl-top: color-mix(in srgb, var(--tone) 64%, #2a2c33);
  --sl-side: color-mix(in srgb, var(--tone) 20%, #0b0c0f);
  --sl-edge: color-mix(in srgb, var(--tone) 80%, transparent);
  position: relative; aspect-ratio: 1; container-type: inline-size; isolation: isolate;
}
.sl-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  transition: transform 0.45s var(--ease); }
.sl-art .sl-logo, .sl-art .sl-title {
  position: absolute; z-index: 2; left: 24%; top: 54%; width: 44%; height: 26%;
  transition: transform 0.45s var(--ease);
}
.sl-art .sl-logo { object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7)); }
.sl-art .sl-title {
  display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden;
  font-size: 6.4cqw; font-weight: 900; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance;
  color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.75));
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  /* printed like a foil logo */
  .sl-art .sl-title { background: linear-gradient(100deg, #ffffff 10%, #d6f2ff 38%, #f4d9ff 62%, #fff4c9 86%);
    -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.sl-art.has-logo { --sl-spark: 0; }
/* where each kind's front face is (percent of the 200 x 200 drawing) */
.sl-art[data-cat="booster_pack"] :is(.sl-logo, .sl-title) { left: 32%; top: 20%; width: 36%; height: 26%; transform: rotate(-5deg); }
.sl-art[data-cat="booster_box"] :is(.sl-logo, .sl-title) { left: 13%; top: 57%; width: 61%; height: 25%; }
.sl-art[data-cat="etb"] :is(.sl-logo, .sl-title) { left: 24%; top: 53%; width: 44%; height: 27%; }
.sl-art[data-cat="bundle"] :is(.sl-logo, .sl-title) { left: 35%; top: 19%; width: 30%; height: 30%; }
.sl-art[data-cat="tin"] :is(.sl-logo, .sl-title) { left: 25%; top: 48%; width: 50%; height: 30%; }
.sl-art[data-cat="collection"] :is(.sl-logo, .sl-title) { left: 14%; top: 32%; width: 34%; height: 30%; }
.sl-art[data-cat="build_battle"] :is(.sl-logo, .sl-title) { left: 24%; top: 45%; width: 46%; height: 30%; }
.sl-art[data-cat="blister"] :is(.sl-logo, .sl-title) { left: 36%; top: 31%; width: 28%; height: 21%; }
.sl-art[data-cat="deck"] :is(.sl-logo, .sl-title) { left: 32%; top: 42%; width: 33%; height: 28%; }
.sl-art[data-cat="case"] :is(.sl-logo, .sl-title) { left: 13%; top: 53.5%; width: 34%; height: 19%; }
.sl-art[data-cat="case"] .sl-logo { filter: none; }
.sl-art[data-cat="coin"] :is(.sl-logo, .sl-title) { left: 30%; top: 36%; width: 40%; height: 24%; }
.sl-art[data-cat="lot"] :is(.sl-logo, .sl-title) { left: 36%; top: 53%; width: 28%; height: 14%; }
/* a title's size follows its space, so a long word never breaks mid-word */
.sl-art[data-cat="booster_box"] .sl-title { font-size: 7.4cqw; }
.sl-art[data-cat="tin"] .sl-title, .sl-art[data-cat="build_battle"] .sl-title { font-size: 6.2cqw; }
.sl-art[data-cat="etb"] .sl-title { font-size: 6cqw; }
.sl-art[data-cat="coin"] .sl-title { font-size: 5.2cqw; }
.sl-art[data-cat="booster_pack"] .sl-title, .sl-art[data-cat="collection"] .sl-title,
.sl-art[data-cat="deck"] .sl-title { font-size: 4.9cqw; }
.sl-art[data-cat="bundle"] .sl-title, .sl-art[data-cat="case"] .sl-title { font-size: 4.4cqw; }
.sl-art[data-cat="blister"] .sl-title, .sl-art[data-cat="lot"] .sl-title { font-size: 4cqw; }
.sl-art[data-cat="case"] .sl-title { background: none; color: #23262d; filter: none; }

/* ------------------------------------------------------------ tiles */
.sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 1rem; }
.sl-tile {
  position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 20px; overflow: hidden;
  color: var(--ink); background: var(--sl-card); box-shadow: inset 0 0 0 1px var(--sl-hair), 0 30px 60px -44px rgba(0, 0, 0, 0.9);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.sl-tile .sl-stage {
  position: relative; padding: 0.9rem 0.9rem 0.2rem; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 40%, color-mix(in srgb, var(--tone) 22%, transparent), transparent 72%);
}
.sl-tile .sl-stage::after {
  /* the foil catching the light as the tile is picked up */
  content: ""; position: absolute; inset: -10% -60%; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 159, 196, 0.28) 44%, rgba(255, 224, 138, 0.28) 48%,
    rgba(143, 233, 166, 0.28) 52%, rgba(159, 227, 245, 0.3) 56%, rgba(206, 198, 246, 0.28) 60%, transparent 66%);
  mix-blend-mode: color-dodge; transform: translateX(-35%); transition: transform 0.8s var(--ease), opacity 0.3s;
}
.sl-tile:hover, .sl-tile:focus-visible { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 45%, transparent), 0 34px 60px -36px rgba(0, 0, 0, 0.95), 0 0 42px -18px color-mix(in srgb, var(--tone) 70%, transparent); text-decoration: none; }
.sl-tile:hover .sl-stage::after { opacity: 1; transform: translateX(35%); }
.sl-tile:hover .sl-art > svg, .sl-tile:hover .sl-art .sl-logo, .sl-tile:hover .sl-art .sl-title { transform: translateY(-5px) scale(1.03); }
.sl-tile:hover .sl-art[data-cat="booster_pack"] :is(.sl-logo, .sl-title) { transform: translateY(-5px) scale(1.03) rotate(-5deg); }
.sl-tile .sl-body { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.35rem 0.95rem 0.95rem; flex: 1; }
.sl-kind { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--tone) 75%, var(--ink)); }
:root[data-theme="light"] .sl-kind { color: var(--muted); }
.sl-name { font-weight: 750; font-size: 0.9rem; line-height: 1.22; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-set { font-size: 0.74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-priceline { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.45rem; }
.sl-price { font-weight: 900; font-size: 1.08rem; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.sl-price.none { font-size: 0.78rem; font-weight: 600; color: var(--faint); letter-spacing: 0; }
.sl-priceline .sl-d { font-size: 0.8rem; }

/* ------------------------------------------------------------ catalogue head */
.sl-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.4rem;
  align-items: center; margin-bottom: 1.4rem; }
.sl-hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1; margin-bottom: 0.7rem; }
.sl-hero .lede { color: var(--ink-dim); max-width: 36rem; font-size: 1.02rem; margin-bottom: 1rem; }
.sl-facts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sl-fact { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.42rem 0.8rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 0 0 1px var(--sl-hair); font-size: 0.8rem; color: var(--muted); }
.sl-fact b { color: var(--ink); font-weight: 900; font-variant-numeric: tabular-nums; }
:root[data-theme="light"] .sl-fact { background: #fff; }
.sl-credit { font-size: 0.78rem; color: var(--muted); }
.sl-credit a { color: var(--ice); }
:root[data-theme="light"] .sl-credit a { color: var(--ice-deep); }

/* the newest set on a shelf, with its headline products */
.sl-spot { position: relative; border-radius: 26px; padding: 1.1rem 1.1rem 0.9rem; overflow: hidden;
  background: radial-gradient(120% 90% at 80% 0%, color-mix(in srgb, var(--tone) 20%, transparent), transparent 60%), var(--sl-card);
  box-shadow: inset 0 0 0 1px var(--sl-hair), 0 40px 70px -50px rgba(0, 0, 0, 0.95); }
.sl-spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--sl-rainbow); opacity: 0.55;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sl-spot-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.2rem; }
.sl-spot-head img { height: 34px; max-width: 45%; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6)); }
.sl-spot-head small { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ice); }
:root[data-theme="light"] .sl-spot-head small { color: var(--ice-deep); }
.sl-spot-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.4rem; }
.sl-spot-item { position: relative; display: grid; justify-items: center; gap: 0.1rem; color: var(--ink); min-width: 0; }
.sl-spot-item .sl-art { width: 100%; }
.sl-spot-item .sl-art > svg, .sl-spot-item .sl-art :is(.sl-logo, .sl-title) { animation: sl-float 6.5s ease-in-out infinite; }
.sl-spot-item .sl-art[data-cat="booster_pack"] :is(.sl-logo, .sl-title) { animation-name: sl-float-tilt; }
.sl-spot-item:nth-child(2) .sl-art > svg, .sl-spot-item:nth-child(2) .sl-art :is(.sl-logo, .sl-title) { animation-delay: -2.2s; }
.sl-spot-item:nth-child(3) .sl-art > svg, .sl-spot-item:nth-child(3) .sl-art :is(.sl-logo, .sl-title) { animation-delay: -4.4s; }
.sl-spot-item:nth-child(4) .sl-art > svg, .sl-spot-item:nth-child(4) .sl-art :is(.sl-logo, .sl-title) { animation-delay: -1.1s; }
.sl-paused, .sl-paused * { animation-play-state: paused !important; }
.sl-sticker { display: inline-grid; justify-items: center; padding: 0.24rem 0.5rem 0.28rem; border-radius: 7px; color: #101115;
  background: var(--sl-sticker); background-size: 220% 220%; line-height: 1.1; transform: rotate(-3deg);
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }
.sl-sticker b { font-size: 0.86rem; font-weight: 900; letter-spacing: -0.02em; white-space: nowrap; }
.sl-sticker small { margin-top: 1px; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #4c5468; white-space: nowrap; }
.sl-spot-item:nth-child(even) .sl-sticker { transform: rotate(2.5deg); }

/* ------------------------------------------------------------ filters */
.sl-kinds { display: flex; gap: 0.45rem; overflow-x: auto; padding: 0.2rem 0.1rem 0.7rem; margin-bottom: 0.4rem;
  scrollbar-width: thin; -webkit-mask: linear-gradient(90deg, #000 92%, transparent); mask: linear-gradient(90deg, #000 92%, transparent); }
.sl-kinds .chip { flex: none; }
.sl-kinds .chip small { font-size: 0.7rem; opacity: 0.7; font-variant-numeric: tabular-nums; }
.sl-kinds .chip.active small { opacity: 0.75; }
.sl-tools { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto; gap: 0.6rem; align-items: end;
  margin-bottom: 1.3rem; }
.sl-tools label.field { min-width: 0; }
.sl-tools .sl-q { position: relative; }
.sl-tools .sl-q svg { position: absolute; left: 0.85rem; bottom: 0.78rem; width: 1rem; height: 1rem; color: var(--muted); pointer-events: none; }
.sl-tools .sl-q input { padding-left: 2.3rem; }
.sl-tools select { padding-right: 1.9rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.sl-resultline { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 0 0 0.9rem; }
.sl-resultline h2 { margin: 0; font-size: 1.15rem; }
.sl-resultline .clear { font-size: 0.82rem; }

/* ------------------------------------------------------------ movers */
.sl-movers { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.6rem; }
.sl-movers .panel { padding: 1rem 1.1rem; }
.sl-movers h3 { display: flex; align-items: center; gap: 0.4rem; font-size: 0.98rem; margin: 0 0 0.35rem; }
.sl-mover { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; padding: 0.4rem 0;
  border-top: 1px solid var(--sl-hair); color: var(--ink); }
.sl-mover:first-of-type { border-top: 0; }
.sl-mover .sl-art { width: 48px; }
.sl-mover b { display: block; font-size: 0.86rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-mover small { display: block; font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-mover .v { text-align: right; font-variant-numeric: tabular-nums; }
.sl-mover .v span { display: block; font-weight: 900; font-size: 0.9rem; }
.sl-mover:hover b { color: var(--ice); }
.sl-window { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--sl-hair); }
.sl-window a { padding: 0.28rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.sl-window a.on { background: var(--foil); color: #101115; }
.sl-building { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; margin-bottom: 1.6rem; }
.sl-building .ico { width: 2.2rem; height: 2.2rem; }
.sl-building p { margin: 0.15rem 0 0.55rem; color: var(--muted); font-size: 0.86rem; }
.sl-building .progress { max-width: 26rem; }

/* ------------------------------------------------------------ pager */
.sl-pager { display: flex; justify-content: center; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin: 1.8rem 0 0.4rem; }
.sl-pager a, .sl-pager span { min-width: 2.3rem; text-align: center; padding: 0.42rem 0.7rem; border-radius: 999px; font-size: 0.85rem;
  color: var(--ink-dim); box-shadow: inset 0 0 0 1px var(--sl-hair); font-variant-numeric: tabular-nums; }
.sl-pager a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.sl-pager .on { background: var(--foil); color: #101115; box-shadow: none; font-weight: 800; }
.sl-pager .gap { box-shadow: none; padding-inline: 0.2rem; min-width: 0; }

/* ------------------------------------------------------------ product page */
.sl-product { display: grid; grid-template-columns: minmax(260px, 420px) minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: start; }
.sl-showcase { position: sticky; top: calc(var(--topbar-h) + 1rem); border-radius: 28px; padding: 1.6rem 1.4rem 1.2rem; overflow: hidden;
  background: radial-gradient(80% 60% at 50% 42%, color-mix(in srgb, var(--tone) 28%, transparent), transparent 72%), var(--sl-card);
  box-shadow: inset 0 0 0 1px var(--sl-hair), 0 40px 80px -50px rgba(0, 0, 0, 0.95); }
.sl-showcase .sl-art { max-width: 340px; margin: 0 auto; }
.sl-showcase .sl-art > svg { animation: sl-float 7s ease-in-out infinite; }
.sl-showcase .sl-art .sl-logo, .sl-showcase .sl-art .sl-title { animation: sl-float 7s ease-in-out infinite; }
.sl-showcase .sl-art[data-cat="booster_pack"] :is(.sl-logo, .sl-title) { animation-name: sl-float-tilt; }
@keyframes sl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes sl-float-tilt { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-8px) rotate(-5deg); } }
.sl-showcase .sl-sticker { position: absolute; right: 1rem; top: 1rem; z-index: 3; transform: rotate(6deg); padding: 0.4rem 0.75rem 0.45rem; }
.sl-showcase .sl-sticker b { font-size: 1.2rem; }
.sl-showcase .sl-sticker small { font-size: 0.55rem; }
.sl-showcase .sl-setlink { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 0.4rem;
  color: var(--ink-dim); font-size: 0.84rem; }
.sl-showcase .sl-setlink svg { width: 1.05rem; height: 1.05rem; flex: none; }
.sl-showcase .sl-setlink:hover { color: var(--ink); }

.sl-title-row h1 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.05; margin: 0 0 0.6rem; }
.sl-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem; }
.sl-pricecard { position: relative; border-radius: 24px; padding: 1.2rem 1.3rem; margin-bottom: 1rem; overflow: hidden;
  background: linear-gradient(155deg, rgba(191, 232, 247, 0.09), rgba(23, 25, 29, 0.46) 60%);
  box-shadow: inset 0 0 0 1px rgba(191, 232, 247, 0.22), 0 30px 60px -44px rgba(0, 0, 0, 0.9); }
.sl-pricecard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--sl-rainbow); opacity: 0.6;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
:root[data-theme="light"] .sl-pricecard { background: #fff; }
.sl-pricecard .lbl { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ice); }
:root[data-theme="light"] .sl-pricecard .lbl { color: var(--ice-deep); }
.sl-pricecard .big { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; margin: 0.25rem 0 0.35rem; }
.sl-pricecard .big b { font-size: clamp(2.2rem, 6vw, 3rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.sl-pricecard .how { font-size: 0.82rem; color: var(--muted); margin: 0; }
.sl-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.sl-metric { padding: 0.75rem 0.9rem; border-radius: 16px; background: var(--sl-card); box-shadow: inset 0 0 0 1px var(--sl-hair); min-width: 0; }
.sl-metric .k { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sl-metric .v { font-size: 1.2rem; font-weight: 900; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; margin-top: 0.15rem; white-space: nowrap; }
.sl-metric .s { font-size: 0.72rem; color: var(--faint); margin-top: 0.1rem; }
.sl-avgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.sl-caution { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 1rem; }
.sl-caution > svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; color: var(--warn); }
.sl-subh { font-size: 0.86rem; font-weight: 800; margin: 0 0 0.55rem; }
.sl-subh small { display: block; margin-top: 0.15rem; font-size: 0.74rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.sl-nochart { display: flex; gap: 0.9rem; align-items: center; padding: 1.1rem 0.2rem 0.2rem; }
.sl-nochart .ico { flex: none; width: 2.2rem; height: 2.2rem; }
.sl-nochart p { margin: 0; color: var(--muted); font-size: 0.88rem; max-width: 44rem; }
.sl-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 1.1rem 0 0.4rem; }
.sl-addform { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; align-items: end; margin-top: 0.9rem; }
.sl-addform .btn { grid-column: 1 / -1; justify-self: start; }
.sl-held { margin-top: 0.8rem; font-size: 0.86rem; }
.sl-history .chart-box { margin-top: 0.4rem; }
.sl-history .legend i { background: linear-gradient(90deg, #9fe3f5, #cec6f6); }
.sl-table { width: 100%; font-size: 0.85rem; }
.sl-table td, .sl-table th { padding: 0.45rem 0.6rem; }
.sl-foot { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--sl-hair); }

/* ------------------------------------------------------------ vault */
.sl-addtabs { display: inline-flex; gap: 0.25rem; padding: 0.3rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--sl-hair); margin-bottom: 1rem; }
.sl-addtabs button { font: inherit; font-size: 0.86rem; font-weight: 700; padding: 0.45rem 0.95rem; border-radius: 999px; border: 0;
  background: none; color: var(--muted); cursor: pointer; }
.sl-addtabs button[aria-selected="true"] { background: var(--foil); color: #101115; }
.sl-inputwrap { position: relative; display: block; }
.sl-inputwrap > svg { position: absolute; left: 0.85rem; top: 50%; width: 1.05rem; height: 1.05rem; margin-top: -0.525rem;
  color: var(--muted); pointer-events: none; }
.sl-inputwrap input { padding-left: 2.4rem; font-size: 1rem; }
.sl-results { display: grid; gap: 0.25rem; margin-top: 0.5rem; max-height: 22rem; overflow-y: auto; }
.sl-results:empty { display: none; }
.sl-opt { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 0.7rem; align-items: center; width: 100%; padding: 0.35rem 0.6rem;
  border-radius: 12px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.sl-opt:hover, .sl-opt.active { background: rgba(255, 255, 255, 0.06); }
:root[data-theme="light"] .sl-opt:hover, :root[data-theme="light"] .sl-opt.active { background: rgba(20, 24, 28, 0.05); }
.sl-opt .sl-art { width: 44px; }
.sl-opt b { display: block; font-size: 0.88rem; line-height: 1.2; }
.sl-opt small { display: block; font-size: 0.74rem; color: var(--muted); }
.sl-opt .v { font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-chosen { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 0.7rem 0.9rem;
  border-radius: 18px; background: rgba(191, 232, 247, 0.06); box-shadow: inset 0 0 0 1px rgba(191, 232, 247, 0.25); margin-bottom: 0.9rem; }
.sl-chosen .sl-art { width: 72px; }
.sl-chosen b { display: block; line-height: 1.2; }
.sl-chosen small { color: var(--muted); font-size: 0.78rem; }
.sl-fields { display: grid; grid-template-columns: 6rem repeat(2, minmax(0, 1fr)); gap: 0.7rem; align-items: end; }
.sl-fields .wide { grid-column: 1 / -1; }
.sl-custom .sl-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl-hold td { vertical-align: middle; }
.sl-hold .item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0.7rem; align-items: center; min-width: 13rem; }
.sl-hold .item .sl-art { width: 48px; }
.sl-hold .item a { color: var(--ink); font-weight: 700; }
.sl-hold .item a:hover { color: var(--ice); }
.sl-src { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; margin-top: 0.15rem; }
.sl-src.cm { color: var(--ice); }
:root[data-theme="light"] .sl-src.cm { color: var(--ice-deep); }
.sl-valueform { display: flex; gap: 0.3rem; align-items: center; flex-wrap: nowrap; }
.sl-valueform input { width: 7rem; padding: 0.42rem 0.6rem; }
.sl-sealedbtn { cursor: pointer; border: 0; }

/* ------------------------------------------------------------ phones */
@media (max-width: 980px) {
  .sl-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-tools .sl-q { grid-column: 1 / -1; }
  .sl-tools .btn { grid-column: 1 / -1; justify-self: start; }
  .sl-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sl-hero { grid-template-columns: 1fr; }
  .sl-product { grid-template-columns: 1fr; }
  .sl-showcase { position: relative; top: 0; }
  .sl-showcase .sl-art { max-width: 260px; }
}
@media (max-width: 720px) {
  .sl-movers { grid-template-columns: 1fr; }
  .sl-fields, .sl-custom .sl-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-fields .qty { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .sl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
  .sl-tile { border-radius: 16px; }
  .sl-tile .sl-stage { padding: 0.6rem 0.6rem 0; }
  .sl-tile .sl-body { padding: 0.3rem 0.7rem 0.75rem; }
  .sl-name { font-size: 0.84rem; }
  .sl-price { font-size: 0.98rem; }
  .sl-spot { padding: 0.9rem 0.7rem 0.8rem; }
  .sl-sticker { padding: 0.2rem 0.4rem 0.24rem; }
  .sl-sticker b { font-size: 0.78rem; }
  .sl-hero h1 { font-size: 2rem; }
  .sl-addform { grid-template-columns: 5rem minmax(0, 1fr); }
  .sl-addform label:nth-of-type(3) { grid-column: 1 / -1; }
  .sl-avgs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .sl-avgs .sl-metric { padding: 0.6rem 0.65rem; }
  .sl-avgs .sl-metric .v { font-size: 1rem; }
  .sl-chosen { grid-template-columns: 56px minmax(0, 1fr); }
  .sl-chosen .sl-art { width: 56px; }
  .sl-chosen .v { grid-column: 2; }
}

/* the holdings table becomes one card per holding on a phone */
@media (max-width: 640px) {
  .sl .stat-grid .stat.hero { grid-column: 1 / -1; }
  .sl .stat-grid .stat:not(.hero) .value { font-size: clamp(1rem, 4.8vw, 1.3rem); }
  .sl-hold thead { display: none; }
  .sl-hold, .sl-hold tbody { display: block; }
  .sl-hold tr { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem 0.8rem;
    padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--line); }
  .sl-hold tr:last-child { border-bottom: 0; }
  .sl-hold td { display: block; padding: 0; border: 0; min-width: 0; }
  .sl-hold tbody tr:hover td { background: none; }
  .sl-hold td[data-label="Item"] { grid-column: 1 / -1; padding-right: 2.6rem; }
  .sl-hold td[data-label="Value each"] { grid-column: 1 / -1; }
  .sl-hold td[data-label]:not([data-label="Item"])::before { content: attr(data-label); display: block; margin-bottom: 0.15rem;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .sl-hold td.num { text-align: left; }
  .sl-hold td:last-child { position: absolute; top: 0.8rem; right: 0.8rem; }
  .sl-hold .item { min-width: 0; }
  .sl-valueform input { width: 100%; max-width: 10rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-showcase .sl-art > svg, .sl-showcase .sl-art .sl-logo, .sl-showcase .sl-art .sl-title,
  .sl-spot-item .sl-art > svg, .sl-spot-item .sl-art .sl-logo, .sl-spot-item .sl-art .sl-title { animation: none; }
  .sl-tile, .sl-tile .sl-stage::after, .sl-art > svg, .sl-art .sl-logo, .sl-art .sl-title { transition: none; }
}

/* the vault's two section headings: h2s under the page's h1, at panel-head size */
#sl-add-h, #sl-hold-h { font-size: 1.08rem; }