/* Shared styles for the public demo pages (score screen + emailed card).
   Kept in one file so the two pages cannot drift apart.

   The "follow us" block exists because the founder's own feedback on the score
   screen (Sep 12 2026) was that a bare underlined Instagram link looked like
   unstyled HTML next to the rest of the card. It is now a labelled card with
   branded icon tiles, one per platform. */

.follow {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  background: #fff;
  padding: 18px 16px 16px;
  margin-top: 22px;
  text-align: center;
}

.follow-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4, #9ca3af);
  margin-bottom: 12px;
}

.follow-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.follow-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 16px 8px 9px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: var(--text-1, #111827);
  font-size: 14px;
  font-weight: 500;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.follow-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
}

.follow-ico {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.follow-ico svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Instagram's own gradient, LinkedIn's own blue - the tiles are recognisable
   at a glance without loading an icon font or a third-party image. */
.follow-ico-ig { background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 55%, #6228d7 100%); }
.follow-ico-li { background: #0a66c2; }

.follow-text { display: block; text-align: left; line-height: 1.2; }
.follow-name { display: block; }
.follow-sub {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-4, #9ca3af);
  margin-top: 1px;
}

@media (max-width: 380px) {
  .follow-tile { flex: 1 1 100%; justify-content: flex-start; }
}

/* Shown when an emailed card link is past its life (Sep 12 2026). */
.card-note {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-3, #6b7280);
}

/* The exam's full name under its title (Kishan, Sep 12 2026): small, muted,
   the way the admin list shows it too. */
.exam-sub {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-3, #6b7280);
  margin: -2px 0 10px;
}