/* A card in miniature: the sign-up wizard's samples (Views/Start/_Sample.cshtml), and the gallery's
   cards that have no picture taken yet. Its colours are its theme's own (card-ground.css,
   .card-theme-*), so the likeness is the card, not a drawing of it. */
.jz-mini { display: block; width: 236px; box-sizing: border-box; padding: 7px; border-radius: 36px; background: #0b0f1a; box-shadow: 0 26px 50px -30px rgba(20, 34, 74, .55); transition: box-shadow .15s; }
.jz-mini__screen { display: flex; flex-direction: column; align-items: center; height: 420px; overflow: hidden; border-radius: 29px; background: var(--c-bg); color: var(--c-text); text-align: center; }
.jz-mini__cover { display: block; flex: none; width: 100%; height: 88px; object-fit: cover; background: color-mix(in oklab, var(--c-primary) 35%, var(--c-bg)); }
.jz-mini__logo {
  position: relative; flex: none; width: 54px; height: 54px; margin-top: -27px; overflow: hidden; border-radius: 50%;
  border: 3px solid var(--c-surface); background: var(--c-primary); color: var(--c-primary-fg);
  display: flex; align-items: center; justify-content: center; font-family: var(--lp-display); font-weight: 800; font-size: 21px;
}
.jz-mini__logo img { width: 100%; height: 100%; object-fit: cover; background: var(--c-surface); }
.jz-mini__name { margin-top: 6px; padding: 0 12px; font-family: var(--lp-display); font-size: 15.5px; line-height: 1.25; overflow-wrap: anywhere; }
.jz-mini__prof { padding: 0 12px; font-size: 11px; line-height: 1.4; color: var(--c-muted); }
.jz-mini__acts { display: flex; justify-content: space-between; width: 100%; box-sizing: border-box; padding: 10px 16px 0; }
.jz-mini__acts i { width: 32px; height: 32px; border-radius: 50%; background: var(--c-primary); }
.jz-mini__lines { display: flex; flex-direction: column; gap: 5px; width: 100%; box-sizing: border-box; padding: 10px 10px 0; }
.jz-mini__line {
  display: flex; align-items: center; gap: 8px; min-height: 34px; box-sizing: border-box; padding: 5px 7px;
  border-radius: min(var(--c-radius, 12px), 10px); background: var(--c-surface); border: var(--c-border-w, 1px) solid var(--c-border);
  font-size: 11.5px; text-align: start;
}
.jz-mini__line img { flex: none; width: 32px; height: 32px; border-radius: 7px; object-fit: cover; }
.jz-mini__line span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jz-mini__line b { flex: none; color: var(--c-primary); }
.jz-mini__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: 100%; box-sizing: border-box; padding: 8px 10px 0; }
.jz-mini__photos img { width: 100%; height: 50px; object-fit: cover; border-radius: min(var(--c-radius, 12px), 7px); }
.jz-mini__cta {
  display: flex; align-items: center; justify-content: center; width: calc(100% - 20px); min-height: 34px; margin: auto 10px 10px;
  border-radius: min(var(--c-radius, 12px), 11px); background: var(--c-primary); color: var(--c-primary-fg); font-size: 12px; font-weight: 700;
}