/* ui/BlueprintOffer — the blueprint offer: three ships, a picture each, its name and "by <creator>".
   Contract: ./BlueprintOffer.spec.md. Nothing but the picture, the name and the credit (Jackson,
   docs/blueprints.md §6). The ship is the card's hero: the canvas takes almost all of the card
   and client/BlueprintArt fits the ship's own bounds to it; the words sit small beneath.
   Tokens only (ui/Theme C8). */

.sp-offer {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 14px;
  width: min(100%, 900px);
  margin: 0 auto;
  pointer-events: auto;
}

.sp-offer__slot {
  position: relative;
  min-width: 0;
}

.sp-offer__card {
  --glow: var(--sp-accent);
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  justify-items: center;
  width: 100%;
  min-width: 0;
  padding: 4px 4px 10px;
  overflow: hidden;
  color: var(--sp-text);
  /* A hangar bay: the ship's own light pooled on the floor under it, a faint deck grid, glass. */
  background:
    radial-gradient(ellipse 62% 30% at 50% 74%, color-mix(in srgb, var(--glow) 22%, transparent), transparent 72%),
    radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--glow) 12%, transparent), transparent 66%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--sp-line) 34%, transparent) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, color-mix(in srgb, var(--sp-space-2) 88%, transparent), color-mix(in srgb, var(--sp-space-0) 92%, transparent));
  border: 1px solid var(--sp-line-strong);
  border-radius: var(--sp-radius);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sp-text) 9%, transparent),
    0 10px 28px color-mix(in srgb, var(--sp-space-0) 70%, transparent);
  cursor: pointer;
  transition: border-color var(--sp-dur-fast) var(--sp-ease-out), transform var(--sp-dur-fast) var(--sp-ease-out), box-shadow var(--sp-dur) var(--sp-ease-out);
}

/* A hairline of light along the card's top edge, brighter when it is hovered. */
.sp-offer__card::before {
  content: '';
  position: absolute;
  inset: 0 18% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--glow) 70%, transparent), transparent);
  opacity: 0.55;
  transition: opacity var(--sp-dur-fast) var(--sp-ease-out);
}

.sp-offer__card:hover {
  border-color: color-mix(in srgb, var(--glow) 70%, var(--sp-line-strong));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sp-text) 12%, transparent),
    0 0 var(--sp-glow-lg) color-mix(in srgb, var(--glow) 30%, transparent),
    0 10px 28px color-mix(in srgb, var(--sp-space-0) 70%, transparent);
  transform: translateY(-3px);
}

.sp-offer__card:hover::before {
  opacity: 1;
}

.sp-offer__card:active {
  transform: translateY(0) scale(0.985);
}

.sp-offer__card:focus-visible {
  outline: 2px solid var(--sp-accent-2);
  outline-offset: 3px;
}

/* The ship flying now (keep last): lit in accent-2, a loop mark in its corner, set apart. */
.sp-offer__slot[data-current='true'] .sp-offer__card {
  --glow: var(--sp-accent-2);
  border-color: color-mix(in srgb, var(--sp-accent-2) 72%, var(--sp-line-strong));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--sp-accent-2) 40%, transparent),
    0 0 var(--sp-glow-sm) color-mix(in srgb, var(--sp-accent-2) 30%, transparent);
}

.sp-offer__keep {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 18px;
  height: 18px;
  background: var(--sp-accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.4-5.7'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.4-5.7'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 4px var(--sp-accent-2));
}

/* Keep last stands apart from the three new ships: a gap and a faint rule between. */
.sp-offer__slot[data-current='true']:first-child {
  left: -8px;
}

.sp-offer__slot[data-current='true']:first-child::after {
  content: '';
  position: absolute;
  top: 12%;
  right: -10px;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--sp-line-strong), transparent);
}

.sp-offer__art {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
}

.sp-offer__name {
  max-width: 100%;
  overflow: hidden;
  font: 700 15px/1.2 var(--sp-font-display);
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 12px color-mix(in srgb, var(--glow) 45%, transparent);
}

.sp-offer__by {
  max-width: 100%;
  overflow: hidden;
  font: 500 11px/1.3 var(--sp-font-ui);
  color: var(--sp-text-dim);
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Report: a small flag in the card's corner, for a community blueprint only. */
.sp-offer__report {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  font: 600 13px/1 var(--sp-font-ui);
  color: var(--sp-text-dim);
  background: color-mix(in srgb, var(--sp-space-0) 70%, transparent);
  border: 1px solid var(--sp-line);
  border-radius: 50%;
  cursor: pointer;
}

.sp-offer__report:hover,
.sp-offer__report:focus-visible {
  color: var(--sp-danger);
  border-color: var(--sp-danger);
  outline: none;
}

/* In flight: a row of large cards docked by ui/Hud (above the vitals with a pointer, in the top
   band on a phone); the app moves the camera so the pilot's ship stays clear of it. */
.sp-offer[data-layout='strip'] {
  /* Held to the height too: the row must end under a ship at the screen's centre (a row of
     206 px cards is 400 px tall, which on a 900 px screen covered the ship and the fight). */
  --card: clamp(112px, min(14vw, 13vh), 206px);
  grid-auto-columns: var(--card);
  justify-content: center;
  width: auto;
  max-width: 100%;
  gap: 12px;
}

.sp-offer[data-layout='strip'] .sp-offer__card {
  padding: 2px 2px 8px;
}

.sp-offer[data-layout='strip'] .sp-offer__name {
  font-size: 14px;
}

.sp-offer[data-layout='strip'] .sp-offer__by {
  font-size: 10px;
}

/* The offer arrives: the cards rise in one after another (still under reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  .sp-offer__slot {
    animation: sp-offer-in 460ms var(--sp-ease-out) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
}

@keyframes sp-offer-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* A phone: one big card at a time, swiped sideways, the next one peeking. */
.sp-offer[data-layout='swipe'] {
  display: flex;
  gap: 12px;
  padding: 0 11%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.sp-offer[data-layout='swipe']::-webkit-scrollbar {
  display: none;
}

.sp-offer[data-layout='swipe'] .sp-offer__slot {
  flex: 0 0 78%;
  scroll-snap-align: center;
}

@media (max-width: 560px) {
  .sp-offer[data-layout='row'] {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Stacked: each card a wide band, the ship still filling its art. */
  .sp-offer[data-layout='row'] .sp-offer__art {
    aspect-ratio: 16 / 9;
  }

  /* Held upright: four across the width under the top band. */
  .sp-offer[data-layout='strip'] {
    --card: min(112px, calc((100vw - 52px) / 4));
    gap: 6px;
  }

  .sp-offer[data-layout='strip'] .sp-offer__name {
    font-size: 12px;
  }
}

/* A phone held sideways (a short screen): the cards fit the top band's middle column, a third of
   the height, and the camera keeps the ship below them. */
@media (max-height: 500px) {
  .sp-offer[data-layout='strip'] {
    --card: clamp(84px, 25vh, 118px);
    gap: 6px;
  }

  .sp-offer[data-layout='strip'] .sp-offer__card {
    padding: 1px 1px 5px;
  }

  .sp-offer[data-layout='strip'] .sp-offer__name {
    font-size: 11px;
  }

  .sp-offer[data-layout='strip'] .sp-offer__by {
    font-size: 9px;
  }

  .sp-offer__keep {
    top: 4px;
    left: 4px;
    width: 13px;
    height: 13px;
  }
}

/* The pilot's own show / hide (spec: Shown and hidden by the pilot): a small chevron at the row's
   corner while the cards show, and the offer put away as that one button, lit, waiting. */
.sp-offer {
  position: relative;
}

.sp-offer__toggle {
  position: absolute;
  top: -38px;
  right: 0;
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 30px;
  padding: 0 12px;
  font: 700 14px/1 var(--sp-font-ui);
  color: var(--sp-text-dim);
  background: color-mix(in srgb, var(--sp-space-0) 78%, transparent);
  border: 1px solid var(--sp-line-strong);
  border-radius: 999px;
  cursor: pointer;
  pointer-events: auto;
}

.sp-offer__toggle:hover,
.sp-offer__toggle:focus-visible {
  color: var(--sp-text);
  border-color: var(--sp-accent);
  outline: none;
}

.sp-offer[data-collapsed='true'] {
  display: flex;
  justify-content: center;
  width: auto;
}

.sp-offer[data-collapsed='true'] .sp-offer__toggle {
  position: static;
  min-width: 64px;
  height: 36px;
  color: var(--sp-accent);
  border-color: var(--sp-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--sp-accent) 35%, transparent);
}

/* A thumb: the cards sit in the top band, so the chevron hangs under the row, a full touch target. */
@media (pointer: coarse) {
  .sp-offer__toggle {
    top: auto;
    bottom: -48px;
    min-width: 56px;
    height: 44px;
  }

  .sp-offer[data-collapsed='true'] .sp-offer__toggle {
    height: 44px;
  }
}

.sp-offer__toggle {
  grid-auto-flow: column;
  gap: 8px;
}

.sp-offer__toggle-key {
  padding: 2px 6px;
  font: 700 11px/1 var(--sp-font-mono);
  color: var(--sp-text);
  border: 1px solid var(--sp-line-strong);
  border-radius: 4px;
  background: color-mix(in srgb, var(--sp-space-2) 80%, transparent);
}

/* Put away, a waiting choice says so in words and is hard to miss (spec: Put away, it must not be missed). */
.sp-offer[data-collapsed='true'] .sp-offer__toggle {
  min-width: 0;
  height: 40px;
  padding: 0 16px;
  font: 700 13px/1 var(--sp-font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sp-text);
  background: color-mix(in srgb, var(--sp-accent) 22%, var(--sp-space-0));
}

.sp-offer__toggle-text {
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .sp-offer[data-collapsed='true'] .sp-offer__toggle {
    animation: sp-offer-waiting 1.6s ease-in-out infinite;
  }
}

@keyframes sp-offer-waiting {
  0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--sp-accent) 30%, transparent); }
  50% { box-shadow: 0 0 26px color-mix(in srgb, var(--sp-accent) 75%, transparent); }
}

@media (pointer: coarse) {
  .sp-offer[data-collapsed='true'] .sp-offer__toggle {
    height: 44px;
  }
}

/* The build meter (spec: The build meter): lit = what the pilot starts with, the dashed rest = what
   XP still has to weld. */
.sp-offer__card {
  grid-template-rows: minmax(0, 1fr) auto auto auto;
}

.sp-offer__build {
  position: relative;
  width: 72%;
  height: 4px;
  margin-top: 6px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--sp-text-dim) 55%, transparent) 0 4px,
    transparent 4px 7px
  );
}

.sp-offer__build::before {
  content: '';
  position: absolute;
  inset: 0;
  width: calc(var(--built, 0) * 100%);
  border-radius: 2px;
  background: var(--glow);
  box-shadow: 0 0 8px color-mix(in srgb, var(--glow) 60%, transparent);
}

/* Stats (spec: Stats): damage, hull, speed. An icon and a five-segment bar each, no words. */
.sp-offer__card {
  grid-template-rows: minmax(0, 1fr) auto auto auto auto;
}

.sp-offer__stats {
  display: flex;
  gap: 6px;
  width: 82%;
  margin-top: 6px;
  margin-bottom: 3px;
}

.sp-offer__stat {
  --stat: var(--sp-text-dim);
  display: flex;
  flex: 1 1 0;
  gap: 3px;
  align-items: center;
  min-width: 0;
}

.sp-offer__stat[data-stat='damage'] { --stat: var(--sp-danger); }
.sp-offer__stat[data-stat='hull'] { --stat: var(--sp-accent-2); }
.sp-offer__stat[data-stat='speed'] { --stat: var(--sp-xp); }

.sp-offer__stat-icon {
  flex: none;
  width: 11px;
  height: 11px;
  background: var(--stat);
}

/* Damage: a sword, point up. Hull: a heart. Speed: a double chevron. */
.sp-offer__stat[data-stat='damage'] .sp-offer__stat-icon {
  clip-path: polygon(50% 0, 63% 15%, 63% 60%, 88% 60%, 88% 74%, 61% 74%, 61% 100%, 39% 100%, 39% 74%, 12% 74%, 12% 60%, 37% 60%, 37% 15%);
}

.sp-offer__stat[data-stat='hull'] .sp-offer__stat-icon {
  clip-path: polygon(50% 100%, 6% 54%, 0 36%, 4% 18%, 16% 6%, 32% 4%, 50% 20%, 68% 4%, 84% 6%, 96% 18%, 100% 36%, 94% 54%);
}

.sp-offer__stat[data-stat='speed'] .sp-offer__stat-icon {
  clip-path: polygon(0 10%, 26% 10%, 54% 50%, 26% 90%, 0 90%, 28% 50%, 0 10%, 46% 10%, 72% 10%, 100% 50%, 72% 90%, 46% 90%, 74% 50%, 46% 10%);
}

.sp-offer__stat-bar {
  flex: 1 1 auto;
  min-width: 10px;
  height: 5px;
  background: linear-gradient(
    to right,
    var(--stat) 0 calc(var(--pips, 0) * 20%),
    color-mix(in srgb, var(--sp-text-dim) 32%, transparent) calc(var(--pips, 0) * 20%) 100%
  );
  -webkit-mask: repeating-linear-gradient(to right, black 0 calc(20% - 1px), transparent calc(20% - 1px) 20%);
  mask: repeating-linear-gradient(to right, black 0 calc(20% - 1px), transparent calc(20% - 1px) 20%);
}

.sp-offer[data-layout='strip'] .sp-offer__stats {
  gap: 4px;
  width: 92%;
  margin-top: 4px;
}