/* Deal cards, the deal sheet and the results numbers. Colours come from style.css. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 2px;
}
.card {
  background: var(--bg);
  border-radius: 0;
  padding: 0 0 12px;
  text-align: left;
}
.card > div {
  padding: 0 10px;
}
.photo {
  aspect-ratio: 1;
  background: var(--panel) center / cover no-repeat;
  position: relative;
  margin-bottom: 8px;
  padding: 0 !important;
}
.site,
.badge {
  position: absolute;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 999px;
}
.site {
  top: 8px;
  left: 8px;
  background: rgba(16, 27, 46, 0.85);
}
.badge {
  bottom: 8px;
  left: 8px;
  font-weight: 700;
}
.badge.green {
  background: var(--green);
  color: #052e12;
}
.badge.grey {
  background: #475569;
}
.line b {
  font-size: 18px;
}
.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.empty {
  text-align: center;
  padding: 20vh 24px;
}

dialog {
  background: var(--panel);
  color: var(--text);
  border: 0;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 640px;
  margin: auto auto 0;
  padding: 0 16px 32px;
  max-height: 92vh;
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.big {
  width: calc(100% + 32px);
  margin: 0 -16px;
  max-height: 50vh;
  object-fit: cover;
}
.numbers,
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}
.stats {
  padding: 0 16px;
}
.numbers div,
.stats div {
  background: var(--bg);
  border-radius: 14px;
  padding: 12px;
}
.numbers span,
.stats span {
  color: var(--muted);
  font-size: 13px;
  display: block;
}
.numbers b,
.stats b {
  font-size: 22px;
}
.why {
  background: var(--bg);
  border-radius: 14px;
  padding: 12px;
}
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}