/* Platform hero: the BoogieBoard ringed by the rest of the product */

.bbi-ph-win { z-index: 1; }
.bbi-ph-body { padding: 26px 64px 24px; }

.bbi-ph-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.bbi-ph-head > div:first-child { margin-right: auto; }
.bbi-ph-ring { width: 64px; height: 64px; }
.bbi-ph-ring::after { inset: 7px; }
.bbi-ph-ring .bbi-ring__value { font-size: 19px; }
.bbi-ph-ring .bbi-ring__value small { font-size: 8px; margin-top: 1px; }
.bbi-ph-go { height: 42px; padding: 0 18px; font-size: 14px; }
.bbi-ph-go svg { width: 16px; height: 16px; }

.bbi-ph-row {
  display: grid;
  grid-template-columns: 196px repeat(3, 1fr);
  gap: 10px;
  align-items: center;
}

.bbi-ph-row + .bbi-ph-row { margin-top: 9px; }

.bbi-ph-row--head {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bbi-line);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bbi-muted);
}

.bbi-ph-colhead { display: flex; align-items: center; gap: 6px; white-space: nowrap; }

.bbi-ph-colhead i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  color: #fff;
}

.bbi-ph-colhead i svg { width: 11px; height: 11px; }

.bbi-ph-terr {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.bbi-ph-terr .bbi-avatar { width: 34px; height: 34px; }
.bbi-ph-terr b { display: block; font-size: 14px; font-weight: 800; color: var(--bbi-ink); line-height: 1.2; }
.bbi-ph-terr small { display: block; font-size: 11px; font-weight: 600; color: var(--bbi-muted); }
.bbi-ph-cell { height: 46px; font-size: 16px; }
.bbi-ph-row--foot { margin-top: 12px !important; }

.bbi-ph-float {
  z-index: 3;
  padding: 14px 16px;
  box-shadow: var(--bbi-shadow-lg);
  animation: bbi-bob 7s ease-in-out infinite;
}

.bbi-ph-lock { animation-delay: -2s; }
.bbi-ph-sf { animation-delay: -4s; }
.bbi-ph-ai { animation-delay: -1s; }
.bbi-ph-rep { animation-delay: -5s; }

.bbi-ph-ftitle {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--bbi-ink);
}

.bbi-ph-ftitle em {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(94, 114, 228, 0.12);
  font-size: 11px;
  font-style: normal;
  color: var(--bbi-indigo);
}

.bbi-ph-mapbox { position: relative; height: 136px; padding: 2px 8px; }
.bbi-ph-mapbox .bbi-map__area { stroke-width: 0.8; }

.bbi-ph-rule {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--bbi-ink);
}

.bbi-ph-rule span { padding: 5px 8px; border-radius: 8px; background: var(--bbi-surface-2); white-space: nowrap; }
.bbi-ph-rule span.is-dest { background: #fff7e8; color: #9a5b00; }
.bbi-ph-rule svg { width: 13px; height: 13px; color: var(--bbi-muted); flex: none; }

.bbi-ph-sfline { margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--bbi-muted); }
.bbi-ph-sfline b { font-size: 22px; font-weight: 800; color: var(--bbi-ink); margin-right: 4px; font-variant-numeric: tabular-nums; }
.bbi-ph-sf { border-top: 4px solid #1b9ee6; }
.bbi-ph-sf.is-done .bbi-ph-sfline b { color: var(--bbi-good); }

.bbi-ph-ai .bbi-bubble { max-width: 100%; padding: 9px 12px; font-size: 12px; border-radius: 14px; }
.bbi-ph-ai .bbi-bubble + .bbi-bubble { margin-top: 8px; }
.bbi-ph-ask { min-height: 52px; }
.bbi-ph-reply svg { width: 12px; height: 12px; vertical-align: -1px; color: var(--bbi-good); }

.bbi-ph-repline { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bbi-ph-repline .bbi-avatar { width: 34px; height: 34px; }
.bbi-ph-repline b { display: block; font-size: 14px; font-weight: 800; color: var(--bbi-ink); }
.bbi-ph-repline small { display: block; font-size: 12px; font-weight: 600; color: var(--bbi-muted); }