/* ============================================================================
 * /darts/css/career-shirt.css — Throw Career · the photographic shirt
 * (SHIRTS_SPEC §3). Everything here is prefixed `sk-`. The compositor
 * (js/career-shirt-render.js) only ever produces one of three nodes:
 *   .sk-shirt.sk-img     an <img> — a bought shirt with no sponsors
 *   .sk-shirt.sk-host    a host <div> holding .sk-canvas — the composite
 *   .sk-shirt.sk-fb      a host <div> holding the parametric CareerKit.svg()
 * All three fill the caller's box and keep the artwork's own aspect ratio, so
 * the Locker, the shop tile, the walk-on card and the player card can drop any
 * of them into the same slot without a layout shift.
 * ========================================================================== */

.sk-shirt {
  display: block;
  width: 100%;
  margin: 0;
  line-height: 0;               /* no baseline gap under the canvas / img */
  -webkit-user-select: none;
  user-select: none;
}

.sk-shirt.sk-img,
.sk-canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;        /* the compositor supersamples; let the GPU scale */
}

/* the parametric fallback: the SVG carries its own 360×384 viewBox */
.sk-fb > svg,
.sk-shirt > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* a shirt that has not composited yet — a faint plate rather than a hole */
.sk-shirt.sk-host:empty,
.sk-canvas:not([width]) {
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .12));
  border-radius: 6px;
  min-height: 40px;
}

/* ── the designer's pattern picker (thumbnails from previewSwatch) ────────── */
.sk-pats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sk-pat {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid rgba(236, 234, 229, .18);
  border-radius: 8px;
  background: #0f1216 center / cover no-repeat;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.sk-pat img { display: block; width: 100%; height: 100%; object-fit: cover; }

.sk-pat.sk-on { border-color: #b8933f; box-shadow: 0 0 0 2px rgba(184, 147, 63, .28); }

.sk-pat-name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  font: 600 9px/13px "DM Sans", system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #eceae4;
  background: rgba(0, 0, 0, .58);
  text-align: center;
}

/* the strength slider sits under the row */
.sk-strength { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sk-strength input[type="range"] { flex: 1 1 auto; }
.sk-strength output {
  min-width: 3.2em;
  font: 600 12px/1 "DM Sans", system-ui, sans-serif;
  color: rgba(236, 234, 229, .78);
  text-align: right;
}

/* ── the front/back toggle used by the preview ────────────────────────────── */
.sk-sides { display: inline-flex; gap: 2px; border-radius: 999px; overflow: hidden; background: rgba(0, 0, 0, .32); }
.sk-sides button {
  border: 0; padding: 5px 14px; cursor: pointer; background: transparent;
  font: 600 11px/1.4 "DM Sans", system-ui, sans-serif;
  letter-spacing: .07em; text-transform: uppercase; color: rgba(236, 234, 229, .62);
}
.sk-sides button.sk-on { background: rgba(236, 234, 229, .12); color: #eceae4; }

@media (prefers-reduced-motion: reduce) {
  .sk-shirt, .sk-canvas { transition: none !important; }
}