/* Home section «Float на ощупь» (owner: float-lab; markup + behaviour in src/js/home/float-lab.js).
   Head row: the title and, on wide blocks, the lead filling the rest of the row. One white instrument panel: the
   stage (a branded well — soft brand-blue light, a fine blueprint grid fading to the edges, the SA monogram as a
   quiet watermark, the giant outline wear code; on it the three real Steam renders, stacked and crossfaded by JS,
   the change highlight and the before / after split) · readout · the skin's name, which is the picker button
   (its popover lies over the stage) · prices and the catalog link · the scale (wear segments, the hatched floats
   the skin never has, a native range input over the whole 0–1).
   The change highlight is pure compositing (the CDN allows no pixel reads): the stage is the isolated group
   (isolation: isolate) and NOTHING between it and .lab__diff may form a stacking context (no z-index, opacity,
   transform or filter on .lab__art / .lab__frame / .lab__pics) — the screen blend must reach the stage's own
   light, or the black of the difference would show as a box. Fades and dimming therefore sit on .lab__layers. */

.home-lab { container: lab / inline-size; }

/* (head row: the shared block head of home.css — the title, the lead across the rest of the row, under the title
   below 900px of block width; the lab adds nothing of its own) */

.lab {
  --thumb-w: 24px;                 /* ≥ 24px: browsers that drag only by the thumb (iOS) still get a usable target */
  --lab-pad: clamp(14px, 6px + 1.6vw, 28px);
  --hatch: repeating-linear-gradient(135deg, rgba(25, 27, 32, .2) 0 1.5px, transparent 1.5px 6px);
  --art-w: min(100%, 460px);       /* the CDN serves 300 × 225 at most: keep the upscale modest */
  position: relative;              /* the popover's containing block is its grid area (the stage's) */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'name' 'stage' 'read' 'scale' 'buy';
  gap: 20px;
  padding: var(--lab-pad);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
}

/* ---- the skin's name = the picker button ---- */
.lab__who { grid-area: name; min-width: 0; }
.lab__picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.lab__picker:hover { border-color: var(--line-control); box-shadow: var(--shadow-2); }
.lab__picker:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lab__picker[aria-expanded='true'] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lab__picker[aria-expanded='true']:focus-visible { box-shadow: var(--focus-ring); }
/* the small pictures sit in a cool well like the stage's */
.lab__picker-media,
.lab__wpn-media,
.lab__opt-media {
  display: grid;
  place-items: center;
  flex: none;
  background: #EEF3FC;
}
.lab__picker-media { width: 72px; height: 50px; padding: 3px 4px; border-radius: 12px; }
.lab__picker img,
.lab__panel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.lab__noimg { display: grid; place-items: center; color: var(--ink-3); }
.lab__picker-text { display: grid; gap: 2px; min-width: 0; }
/* a knife's or gloves' full name may need two lines */
.lab__name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.lab__picker-act { font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; color: var(--accent-ink); }
.lab__picker-chev {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-ink);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.lab__picker:hover .lab__picker-chev { background: #DCE9FF; }
.lab__picker-chev svg { transition: transform var(--dur-fast) var(--ease-out); }
.lab__picker[aria-expanded='true'] .lab__picker-chev svg { transform: rotate(180deg); }

/* The popover: a white island in the stage's grid area — over the whole stage on wide panels, hanging from its top
   across the block on narrow ones. */
.lab__panel {
  grid-area: stage;
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(25, 27, 32, .08);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 30px 64px -20px rgba(25, 27, 32, .34), 0 2px 8px rgba(25, 27, 32, .06);
  transform-origin: 50% 0;
  animation: lab-pop 180ms cubic-bezier(.16, 1, .3, 1);
}
.lab__panel[hidden] { display: none; }
.lab__panel:focus { outline: none; }
@keyframes lab-pop { from { opacity: 0; transform: translateY(-6px) scale(.985); } }

.lab__panel-head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 12px; border-bottom: 1px solid var(--line); }
.lab__search { position: relative; flex: 1 1 auto; min-width: 0; }
.lab__search > svg { position: absolute; top: 50%; left: 14px; margin-top: -10px; color: var(--ink-3); pointer-events: none; }
.lab__q {
  width: 100%;
  min-height: 48px;
  padding: 0 14px 0 44px;
  border: 1px solid var(--line-control);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-md);         /* 16 px: no zoom on focus in iOS Safari */
  line-height: 1.3;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.lab__q::placeholder { color: var(--ink-3); opacity: 1; }
.lab__q:hover { border-color: var(--ink-3); }
.lab__q:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.lab__panel-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.lab__panel-close:hover { background: var(--surface-sunken); color: var(--ink); }
.lab__panel-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.lab__crumb { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 14px 2px; }
.lab__crumb[hidden] { display: none; }
.lab__back {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  min-height: 36px;
  padding: 0 12px 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.lab__back::before { content: ''; position: absolute; inset: -4px; }    /* a 44 px target */
.lab__back:hover { border-color: var(--accent); color: var(--accent-ink); }
.lab__back:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lab__crumb-name { overflow: hidden; font-size: var(--fs-md); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.lab__list {
  position: relative;              /* the options' offsetParent: the keyboard scrolls the list, never the page */
  min-height: 0;
  max-height: min(440px, 56vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 8px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.lab__list[hidden] { display: none; }
.lab__list[data-view='weapon'] { padding-top: 8px; }
.lab__grp-head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 8px 8px;
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lab__grp-head--weapon { padding-top: 10px; padding-bottom: 4px; font-size: var(--fs-sm); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.lab__hit { padding: 0; background: none; color: inherit; font-weight: 700; }

/* weapon chips: they flow in lines under their type */
.lab__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px 4px; }
.lab__wpn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 3px 12px 3px 3px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 120ms var(--ease-out), background-color 120ms var(--ease-out);
}
.lab__wpn-media { width: 50px; height: 36px; padding: 2px 3px; border-radius: 10px; }
.lab__wpn-count { font-weight: 500; color: var(--ink-3); }
.lab__wpn.is-active { border-color: var(--line-control); background: var(--surface-sunken); }
/* the weapon of the skin on stage: a blue dot after its name */
.lab__wpn.is-current .lab__wpn-name::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}

/* skin rows: picture · name · the float range on a mini 0–1 bar (hatched where the skin never goes) · ✓ */
.lab__opt {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 4px 12px 4px 4px;
  border-radius: 14px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms var(--ease-out);
}
.lab__opt + .lab__opt { margin-top: 2px; }
.lab__opt-media { width: 76px; height: 52px; padding: 3px 4px; border-radius: 12px; }
.lab__opt-text { display: grid; gap: 2px; min-width: 0; }
.lab__opt-name,
.lab__opt-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab__opt-name { font-size: var(--fs-base); font-weight: 500; line-height: 1.3; }
.lab__opt-sub { font-size: var(--fs-xs); line-height: 1.35; color: var(--ink-3); }
.lab__opt-sub .lab__hit { color: var(--ink-2); font-weight: 600; }
.lab__opt-range { display: grid; justify-items: end; gap: 6px; }
.lab__opt-bar {
  position: relative;
  width: 88px;
  height: 8px;
  border-radius: 3px;
  background: var(--hatch), var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.lab__opt-bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--lo) * 100%);
  width: calc((var(--hi) - var(--lo)) * 100%);
  min-width: 2px;
  border-radius: 3px;
  background: #AEB4BE;
}
.lab__opt-nums { font-size: var(--fs-xs); line-height: 1; color: var(--ink-3); white-space: nowrap; }
.lab__opt-check { display: grid; place-items: center; color: var(--accent-strong); }
.lab__opt.is-active { background: var(--surface-sunken); }
.lab__opt[aria-selected='true'] { background: var(--accent-tint); }
.lab__opt[aria-selected='true'].is-active { background: #DCE9FF; }
.lab__opt[aria-selected='true'] .lab__opt-name { font-weight: 600; color: var(--accent-ink); }
.lab__opt.is-active .lab__opt-bar::after,
.lab__opt[aria-selected='true'] .lab__opt-bar::after { background: var(--accent-strong); }

/* loading, failure, nothing found; the status line under the list */
.lab__msg { display: grid; justify-items: start; gap: 12px; padding: 14px 16px 8px; }
.lab__msg[hidden] { display: none; }
.lab__msg-text { max-width: 60ch; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.lab__msg-sk { display: grid; gap: 10px; width: 100%; }
.lab__sk-row { display: flex; align-items: center; gap: 14px; }
.lab__sk-media { width: 76px; height: 52px; border-radius: 12px; }
.lab__sk-line { width: min(240px, 50%); height: 12px; }
.lab__status { padding: 10px 16px 12px; border-top: 1px solid var(--line); font-size: var(--fs-xs); line-height: 1.4; color: var(--ink-3); }

/* ---- stage: the branded well — soft brand-blue light in the middle, a blueprint grid fading to the edges ---- */
.lab__stage {
  grid-area: stage;
  position: relative;
  isolation: isolate;              /* the change highlight blends with this well (see the header) */
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 14px 16px 16px;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(56% 60% at 50% 47%, rgba(55, 129, 252, .19), rgba(55, 129, 252, 0) 72%),
    radial-gradient(90% 80% at 100% 100%, rgba(55, 129, 252, .1), rgba(55, 129, 252, 0) 62%),
    linear-gradient(180deg, #F6F8FD 0%, #E8EEFA 100%);
}
.lab__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(43, 110, 234, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 110, 234, .085) 1px, transparent 1px);
  background-position: center center;
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(72% 70% at 50% 48%, #000 22%, transparent 78%);
  mask-image: radial-gradient(72% 70% at 50% 48%, #000 22%, transparent 78%);
  pointer-events: none;
}
/* The SA monogram as a watermark, cropped by the well's lower left corner. */
.lab__mark {
  position: absolute;
  left: -4%;
  bottom: -9%;
  z-index: 0;
  width: min(54%, 420px);
  color: var(--accent);
  opacity: .075;
  pointer-events: none;
}
.lab__mark .monogram { width: 100%; height: auto; }
/* The wear code as an outline giant in the opposite corner, behind the weapon (the hero's AURA manner). */
.lab__ghost {
  position: absolute;
  right: .14em;
  bottom: -.1em;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  font-synthesis: none;
  font-size: clamp(9rem, 4rem + 26cqi, 19rem);
  line-height: .74;
  letter-spacing: .01em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(31, 91, 209, .2);
  white-space: nowrap;
  transform: skewX(-10deg);
  transform-origin: 100% 100%;
  user-select: none;
  pointer-events: none;
}

.lab__stage-top {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  font-size: var(--fs-xs);
  line-height: 1.2;
  color: var(--ink-2);
}
.lab__levels { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.lab__tiers { display: inline-flex; gap: 4px; }
.lab__tier {
  display: inline-grid;
  place-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
  color: var(--ink-3);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lab__tier.is-on { border-color: var(--ink); background: var(--ink); color: #FFFFFF; }
/* «Показать изменения» · «До / После» */
.lab__tools { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.lab__tool {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px 0 10px;
  border: 1px solid rgba(43, 110, 234, .24);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .86);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lab__tool::before { content: ''; position: absolute; inset: -5px -2px; }   /* a 44 px target */
.lab__tool:hover { border-color: var(--accent); color: var(--accent-ink); }
.lab__tool:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lab__tool[aria-pressed='true'] { border-color: var(--accent-strong); background: var(--accent-strong); color: #FFFFFF; }
.lab__tool[aria-disabled='true'] { border-color: var(--line-strong); background: rgba(255, 255, 255, .6); color: var(--ink-3); cursor: not-allowed; }

.lab__art {
  position: relative;              /* no z-index: see the header */
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  min-height: clamp(200px, 52cqi, 300px);
}
.lab__frame { grid-area: 1 / 1; position: relative; width: var(--art-w); aspect-ratio: 4 / 3; }
.lab__pics,
.lab__layers,
.lab__diff,
.lab__ba { position: absolute; inset: 0; }
.lab__img,
.lab__diff-img,
.lab__ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.lab__img,
.lab__ba-img { filter: drop-shadow(0 14px 18px rgba(25, 27, 32, .14)); }
.lab__img { transition: opacity 120ms linear; }
.lab__img:not([src]),
.lab__diff-img:not([src]),
.lab__ba-img:not([src]) { visibility: hidden; }
/* the weapon dims while the change glows over it; a skin swap fades it out and in */
.lab__layers { transition: filter 360ms var(--ease-out), opacity 160ms var(--ease-out), transform 260ms var(--ease-out); }
.lab__stage.is-diff .lab__layers,
.lab__stage.is-pulse .lab__layers { filter: brightness(.36) saturate(.3); }
.lab__stage.is-ba .lab__layers { opacity: 0; }
.lab__art.is-out .lab__layers,
.lab__art.is-out .lab__ba { opacity: 0; transform: translateY(4px); }

/* What changed: |new − old| on black (unchanged = black), boosted to a near-binary mask, widened by 1 px (the pair
   is drawn five times — in place and shifted 1 px each way — merged with lighten = max), tinted blue, screened over
   the darkened weapon: the changed areas read as filled blue patches, not hairlines. The gain (brightness 7 → a
   difference of ~7 % of full scale already shows; contrast 3 drops the faint noise) was tuned on AK-47 | Азимов,
   Sport Gloves | Vice, ★ Керамбит | Легенды and ★ Штык-нож | Поверхностная закалка: no blur — it would smear a
   Case Hardened blade's scratches into one blue patch. */
.lab__diff {
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
.lab__diff-pair {
  position: absolute;
  inset: 0;
  background: #000000;
  filter: grayscale(1) brightness(7) contrast(3);
  transform: translate(var(--dx, 0), var(--dy, 0));
}
.lab__diff-pair + .lab__diff-pair { mix-blend-mode: lighten; }
.lab__diff-img + .lab__diff-img { mix-blend-mode: difference; }
.lab__diff::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #4C97FF;
  mix-blend-mode: multiply;
}
.lab__stage.is-diff .lab__diff { opacity: 1; transition: opacity 240ms var(--ease-out); }
.lab__stage.is-pulse .lab__diff { animation: lab-diff-pulse 2600ms ease-in-out both; }
.lab__art.is-out .lab__diff { visibility: hidden; }
@keyframes lab-diff-pulse {
  0% { opacity: 0; }
  14% { opacity: 1; }
  42% { opacity: .45; }
  66% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes lab-diff-fade {
  0%, 58% { opacity: 1; }
  100% { opacity: 0; }
}

/* Before / after: the previous level on the left of the divider, the new one on the right. */
.lab__ba { --split: 50%; }
.lab__ba[hidden] { display: none; }
.lab__ba-img--before { clip-path: inset(-12% calc(100% - var(--split)) -12% -12%); }
.lab__ba-img--after { clip-path: inset(-12% -12% -12% var(--split)); }
.lab__ba-line {
  position: absolute;
  top: -2%;
  bottom: -2%;
  left: var(--split);
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--accent-strong);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7);
  pointer-events: none;
}
.lab__ba-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 2px solid var(--accent-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-ink);
  box-shadow: var(--shadow-2);
}
.lab__ba-knob svg { flex: none; margin: 0 -3px; }
.lab__frame:has(.lab__ba-input:focus-visible) .lab__ba-knob { box-shadow: var(--focus-ring), var(--shadow-2); }
.lab__ba-tag {
  position: absolute;
  top: 0;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--ink-2);
  pointer-events: none;
}
.lab__ba-tag--a { left: 0; }
.lab__ba-tag--b { right: 0; }
/* the divider's control: a native range over the whole picture (drag anywhere, arrows by 1 %) */
.lab__ba-input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-appearance: none;
  appearance: none;
}
.lab__ba-input[hidden] { display: none; }
.lab__ba-input::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.lab__ba-input::-webkit-slider-thumb { width: 2px; height: 100%; -webkit-appearance: none; appearance: none; }
.lab__ba-input::-moz-range-track { height: 100%; background: transparent; }
.lab__ba-input::-moz-range-thumb { width: 2px; height: 100%; border: 0; }

/* no render level of the skin loads: a plain note in the middle of the well */
.lab__art-empty {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 34ch;
  font-size: var(--fs-sm);
  line-height: 1.45;
  text-align: center;
  color: var(--ink-2);
}
.lab__art-empty[hidden] { display: none; }
.lab__art-empty svg { color: var(--ink-3); }

/* the stage's short notes: what lights up, or that Steam draws two exteriors the same */
.lab__flash {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  z-index: 3;
  width: fit-content;              /* centred by the margins: a left: 50% box could only take half the width */
  max-width: calc(100% - 16px);
  margin-inline: auto;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(25, 27, 32, .86);
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.lab__flash.is-on { opacity: 1; transform: none; }

.lab__note {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 64ch;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-2);
}
.lab__note svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--accent-ink); }

/* ---- 3D (home/float-lab-3d.js): a skin with a CS2 model is a live 3D render instead of the three Steam pictures.
   The stage gets .is-3d once the model is baked; the Steam pictures (.lab__frame) stay underneath as the loading
   state and the fallback. The canvas is transparent over the well; the before / after divider reuses the 2D
   split's line, knob, tags and native range (.lab__ba-*). ---- */
.lab__three-cap,
.lab__three-hint,
.lab__note-3d { display: none; }
.lab__stage.is-3d .lab__tiers-cap,
.lab__stage.is-3d .lab__tiers,
.lab__stage.is-3d .lab__note-2d,
.lab__stage.is-3d .lab__frame,
.lab__stage.is-3d .lab__art-empty { display: none; }
.lab__stage.is-3d .lab__note-3d { display: inline; }
.lab__stage.is-3d .lab__three-cap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px 0 8px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #FFFFFF;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
}
.lab__stage.is-3d .lab__three-cap svg { width: 16px; height: 16px; }
.lab__stage.is-3d .lab__three-hint { display: inline; color: var(--ink-3); white-space: nowrap; }
.lab__three {
  grid-area: 1 / 1;
  position: relative;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  min-height: 0;
  transition: opacity 200ms var(--ease-out);
}
.lab__three[hidden] { display: none; }
.lab__three.is-out { opacity: 0; }
.lab__three-view {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: pan-y;             /* phones: a vertical swipe still scrolls the page; sideways turns the model */
  -webkit-tap-highlight-color: transparent;
}
.lab__three-view.is-grabbing { cursor: grabbing; }
.lab__three-canvas { display: block; width: 100%; height: 100%; }
.lab__three-split { --split: 50%; position: absolute; inset: 0; pointer-events: none; }
.lab__three-split[hidden] { display: none; }
.lab__three-split .lab__ba-line { top: 6%; bottom: 6%; }
.lab__three:has(.lab__ba-input:focus-visible) .lab__ba-knob { box-shadow: var(--focus-ring), var(--shadow-2); }

/* ---- readout ---- */
.lab__read { grid-area: read; position: relative; display: grid; align-content: start; justify-items: start; gap: 4px; min-width: 0; }
.lab__float-label { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--ink-3); }
.lab__float {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  font-synthesis: none;
  font-size: clamp(4rem, 3rem + 2.6vw, 6rem);
  line-height: .8;
  letter-spacing: .01em;
  color: var(--ink);
  transform-origin: 0 100%;
  transition: color var(--dur-fast) var(--ease-out);
}
/* the thumb in the hatched part: a quiet tag by the label, the number greys */
.lab__out {
  position: absolute;
  top: -3px;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 52px);
  padding: 4px 10px 4px 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lab__out-swatch {
  flex: none;
  width: 16px;
  height: 12px;
  border-radius: 3px;
  background: var(--hatch), var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.lab__read.is-out .lab__out { opacity: 1; transform: none; }
.lab__read.is-out .lab__float { color: var(--ink-3); }
.lab__wear {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.lab__code {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 38px;
  height: 26px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--accent-strong);
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
}
.lab__range { margin-top: 6px; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink-3); }
.lab__range .t-num { color: var(--ink-2); font-weight: 600; white-space: nowrap; }

/* ---- the skin's catalog price and the link ---- */
.lab__buy {
  grid-area: buy;
  display: grid;
  align-content: end;
  gap: 12px;
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* Catalog price per wear: the row of the current wear is lit. */
.lab__prices { display: grid; gap: 6px; }
.lab__prices[data-state='none'] { display: none; }
.lab__prices-cap { font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-3); }
.lab__ladder { display: grid; margin: 0 -10px; padding: 0; list-style: none; }
.lab__rung {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: 34px;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--ink-2);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lab__rung-code {
  display: inline-grid;
  place-items: center;
  height: 22px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--ink-2);
}
.lab__rung-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab__rung-price { justify-self: end; font-size: var(--fs-sm); color: var(--ink); }
.lab__rung-price[data-kind='out'],
.lab__rung-price[data-kind='na'] { font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.lab__rung.is-on { background: var(--accent-tint); color: var(--ink); }
.lab__rung.is-on .lab__rung-code { background: var(--accent-strong); box-shadow: none; color: #FFFFFF; }
.lab__rung.is-off .lab__rung-name { color: var(--ink-3); }
.lab__rung.is-off.is-on { background: var(--surface-sunken); }
.lab__rung.is-off.is-on .lab__rung-code { background: var(--ink-3); }
.lab__price-sk { display: inline-block; width: 84px; height: 12px; border-radius: 4px; vertical-align: middle; }
.lab__cta.btn { width: 100%; gap: 10px; margin-top: 4px; }

/* ---- scale ---- */
.lab__scale {
  grid-area: scale;
  container: labscale / inline-size;
  min-width: 0;
  padding: 4px 10px 0;
}

.lab__ruler { position: relative; height: 24px; }
.lab__tick {
  position: absolute;
  bottom: 0;
  left: calc(var(--at) * 100%);
  padding-bottom: 9px;
  transform: translateX(-50%);
  font-size: var(--fs-xs);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  white-space: nowrap;
}
.lab__tick::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 6px;
  background: var(--line-control);
}
.lab__tick[data-at='0'] { transform: none; }
.lab__tick[data-at='0']::after { left: 0; }
.lab__tick[data-at='1'] { transform: translateX(-100%); }
.lab__tick[data-at='1']::after { left: auto; right: 0; }

.lab__rail { position: relative; height: 44px; }
.lab__track { position: absolute; top: 50%; left: 0; right: 0; height: 12px; margin-top: -6px; }
.lab__seg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--a) * 100% + 1px);
  width: calc((var(--b) - var(--a)) * 100% - 2px);
  border-radius: 3px;
  background: #DCDFE4;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.lab__seg[data-wear='fn'] { left: 0; width: calc(var(--b) * 100% - 1px); border-radius: 6px 3px 3px 6px; }
.lab__seg[data-wear='bs'] { width: calc((var(--b) - var(--a)) * 100% - 1px); border-radius: 3px 6px 6px 3px; }
.lab__seg.is-on { background: var(--accent-strong); }
/* Floats this skin never has: hatched over the track (the thumb may go there to show the wear in general). */
.lab__off {
  position: absolute;
  top: -7px;
  bottom: -7px;
  border-radius: 6px;
  background: var(--hatch), var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.lab__off--lo { left: 0; width: calc(var(--lo) * 100%); }
.lab__off--hi { right: 0; width: calc((1 - var(--hi)) * 100%); }

/* The native range covers the whole scale (+ half a thumb each side, so value v sits at v × width). */
.lab__input {
  position: absolute;
  top: 0;
  left: calc(var(--thumb-w) / -2);
  width: calc(100% + var(--thumb-w));
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.lab__input:focus { outline: none; }
.lab__input::-webkit-slider-runnable-track { height: 44px; border: 0; background: transparent; }
.lab__input::-moz-range-track { height: 44px; border: 0; background: transparent; }
.lab__input::-webkit-slider-thumb {
  box-sizing: border-box;
  width: var(--thumb-w);
  height: 36px;
  margin-top: 4px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: linear-gradient(var(--ink), var(--ink)) center / 2px 14px no-repeat, var(--surface);
  box-shadow: 0 2px 6px rgba(25, 27, 32, .2);
  cursor: grab;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.lab__input::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--thumb-w);
  height: 36px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: linear-gradient(var(--ink), var(--ink)) center / 2px 14px no-repeat, var(--surface);
  box-shadow: 0 2px 6px rgba(25, 27, 32, .2);
  cursor: grab;
}
/* in the hatched part the thumb's frame turns dashed, like the floats it stands on */
.lab__input.is-out::-webkit-slider-thumb { border-style: dashed; }
.lab__input.is-out::-moz-range-thumb { border-style: dashed; }
.lab__input:active::-webkit-slider-thumb { cursor: grabbing; }
.lab__input:active::-moz-range-thumb { cursor: grabbing; }
.lab__input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent), 0 2px 6px rgba(25, 27, 32, .2); }
.lab__input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent), 0 2px 6px rgba(25, 27, 32, .2); }

/* Wear labels: five equal buttons on narrow scales; under the middle of their own segment on wide ones. */
.lab__wears {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin-top: 4px;
}
.lab__wear-btn {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background-color: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lab__wear-btn:hover { background-color: var(--surface-sunken); color: var(--ink); }
.lab__wear-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.lab__wear-btn.is-on { color: var(--accent-ink); }
.lab__wear-btn.is-on::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 16px;
  height: 2px;
  margin-left: -8px;
  border-radius: 1px;
  background: var(--accent-strong);
}
/* an exterior this skin never comes in: still clickable (shows how that wear looks), marked with the hatch
   (::after is the tooltip) */
.lab__wear-btn.is-na {
  background-image: var(--hatch);
  background-position: 50% calc(100% - 7px);
  background-repeat: no-repeat;
  background-size: 20px 5px;
  color: var(--ink-3);
}

.lab__legend {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--ink-3);
}
.lab__legend[hidden] { display: none; }
.lab__legend-swatch {
  flex: none;
  width: 24px;
  height: 14px;
  border-radius: 4px;
  background: var(--hatch), var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* Narrow scales: the 0.07 and 0.38 borders would collide with their neighbours; the render-level borders stay. */
@container labscale (max-width: 599.98px) {
  .lab__tick[data-at='0.07'],
  .lab__tick[data-at='0.38'] { display: none; }
}
@container labscale (min-width: 600px) {
  .lab__wears { position: relative; display: block; height: 44px; }
  .lab__wear-btn { position: absolute; top: 0; left: calc(var(--c) * 100%); transform: translateX(-50%); }
  .lab__legend { justify-content: flex-end; margin-top: -2px; }
}

/* ---- wide panels: stage | readout, the skin (picker), prices and link; the scale across the whole panel ---- */
@container lab (min-width: 860px) {
  .lab {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    grid-template-rows: 1fr auto auto auto;
    grid-template-areas:
      'stage read'
      'stage name'
      'stage buy'
      'scale scale';
    column-gap: clamp(24px, 2.4vw, 40px);
    row-gap: 16px;
  }
  .lab__stage { padding: 18px 22px 20px; }
  .lab__art { min-height: clamp(280px, 30cqi, 380px); }
  .lab__read { padding-top: 6px; }
  .lab__who { padding-top: 18px; border-top: 1px solid var(--line); }
  .lab__buy { padding-top: 0; border-top: 0; }
  .lab__scale { margin-top: 8px; }
  /* the popover takes the stage's place, next to the name it opened from */
  .lab__panel { inset: 0; transform-origin: 100% 70%; }
  .lab__list { flex: 1 1 auto; max-height: none; }
}

/* Phones: a shorter stage and readout, so the slider stays close under the picture. */
@container lab (max-width: 559.98px) {
  .lab { gap: 16px; border-radius: var(--radius-lg); }
  .lab__stage { padding: 12px 12px 14px; border-radius: 16px; }
  .lab__art { min-height: 0; aspect-ratio: 4 / 3; }
  /* a rifle render fills its 300 px file edge to edge: keep the muzzle and the stock off the well's edges */
  .lab { --art-w: min(100% - 28px, 460px); }
  .lab__mark { width: 70%; }
  .lab__float { font-size: 4rem; }
  .lab__wear { margin-top: 10px; font-size: var(--fs-md); }
  .lab__scale { padding-inline: 8px; }
  .lab__tool { min-height: 32px; padding-inline: 8px 10px; }
  /* the short notes go above the weapon (a render leaves its top free) and stay one line where they can */
  .lab__flash { top: 0; bottom: auto; max-width: 100%; padding: 6px 12px; font-size: 11px; transform: translateY(-6px); }
  .lab__picker { gap: 10px; min-height: 60px; }
  .lab__picker-media { width: 64px; height: 46px; }
  .lab__name { font-size: var(--fs-base); line-height: 1.25; }
  .lab__panel { border-radius: 18px; }
  .lab__panel-head { padding: 8px 6px 8px 8px; }
  .lab__list { max-height: min(520px, 60vh); padding-inline: 6px; }
  .lab__opt { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 10px; padding-right: 8px; }
  .lab__opt-media { width: 60px; height: 44px; border-radius: 10px; }
  .lab__opt-check { display: none; }      /* the current skin keeps its blue row */
  .lab__opt-bar { width: 56px; }
  .lab__wpn-media { width: 44px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .lab__picker,
  .lab__picker-chev,
  .lab__picker-chev svg,
  .lab__q,
  .lab__wpn,
  .lab__opt,
  .lab__tier,
  .lab__tool,
  .lab__layers,
  .lab__img,
  .lab__flash,
  .lab__out,
  .lab__float,
  .lab__seg,
  .lab__rung,
  .lab__wear-btn,
  .lab__input::-webkit-slider-thumb,
  .lab__three { transition: none; }
  .lab__panel { animation: none; }
  .lab__art.is-out .lab__layers,
  .lab__art.is-out .lab__ba { transform: none; }
  /* no pulsing: the highlight stands still, then fades */
  .lab__stage.is-pulse .lab__diff { animation: lab-diff-fade 2600ms linear both; }
}

/* Windows high contrast: keep the active segment and thumb, the picker's highlighted and current rows visible. */
@media (forced-colors: active) {
  .lab__seg { background: CanvasText; opacity: .35; }
  .lab__seg.is-on { background: Highlight; opacity: 1; }
  .lab__opt.is-active,
  .lab__wpn.is-active { outline: 2px solid Highlight; outline-offset: -2px; }
  .lab__opt[aria-selected='true'] { outline: 2px solid CanvasText; outline-offset: -2px; }
  .lab__opt-bar::after { background: CanvasText; }
  .lab__ba-line { background: Highlight; }
}