/* Speaker profile header (owner-approved mockup, 2026-09-23) and the
   Leaderboard rank card under it. Loaded after speaker-detail-v3.css.

   Header: identity on the left, the author's description filling the rest of
   the row. The description is cut to the identity block's height, so the
   header keeps one height on every screen; "Show more" opens the rest.
   Rank card: the Performance card's frame and title; the table inside follows
   the Calls table (header band, row lines, mono numbers). */

.sd3-hero-v4 {
  --sd3h-line: #1b1f27;
  --sd3h-soft: #b7bdc8;
  gap: 0;
}

/* Stays a grid on phones too, where the old header dissolved it
   (display: contents) to reorder the KPI cards around the identity. */
.sd3-hero-v4 .sd3-hero-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px 40px;
  padding: 8px 0 0;
}

.sd3-hero-v4 .sd3-identity {
  order: 0;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.sd3-hero-v4 .sd3-avatar {
  width: 84px;
  height: 84px;
}

.sd3-hero-v4 .sd3-identity-right {
  gap: 2px;
}

.sd3-hero-v4 .sd3-title {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -.6px;
  line-height: 1.2;
}

.sd3-hero-v4 .sd3-role {
  color: var(--sd3h-soft);
  font-size: 13px;
}

.sd3-hero-v4 .sd3-meta {
  margin-top: 2px;
  gap: 4px 10px;
  font-size: 12px;
}

.sd3-hero-v4 .sd3-icon-row {
  margin-top: 8px;
}

/* Description: fills the row next to the identity, five lines at most (the
   identity block's height). */
.sd3-hero-about {
  position: relative;
  min-width: 0;
  padding-left: 24px;
  border-left: 1px solid var(--sd3h-line);
  --sd3h-bio-lines: 5;
}

.sd3-hero-bio {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--sd3h-bio-lines);
  overflow: hidden;
  margin: 0;
  color: var(--sd3h-soft);
  font-size: 13px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.sd3-hero-about.is-open .sd3-hero-bio {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Sits over the end of the last visible line; the text fades into it. */
.sd3-hero-more {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0 0 0 44px;
  border: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--sd3-bg, #000) 40px);
  color: var(--sd3-blue);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}

.sd3-hero-more:hover {
  color: var(--sd3-blue-h);
  text-decoration: underline;
}

.sd3-hero-more:focus-visible {
  outline: 2px solid var(--sd3-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

.sd3-hero-about.is-open .sd3-hero-more {
  position: static;
  margin-top: 2px;
  padding: 0;
  background: none;
}

/* Rank card: same frame and head as the Performance card (.sd3-insights). */
.sd3-rank-card {
  margin-top: 20px;
  padding: 18px 20px 16px;
  border-color: rgba(255, 255, 255, .16);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025) 42%, rgba(0, 0, 0, .24)),
    rgba(10, 13, 17, .76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -1px 0 rgba(255, 255, 255, .04),
    0 18px 42px rgba(0, 0, 0, .32);
}

.sd3-rank-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sd3-line);
}

.sd3-rank-title {
  margin: 0;
  color: rgba(255, 255, 255, .90);
  font-size: 18px;
  font-weight: 680;
  line-height: 1.15;
}

/* Same chip as the carousel's "How it works". */
.sd3-rank-link {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--sd3-line);
  border-radius: 13px;
  color: var(--sd3-muted);
  font-size: 11.5px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .12s, color .12s;
}

.sd3-rank-link:hover {
  border-color: var(--sd3-muted);
  color: var(--sd3-text);
}

.sd3-rank-link:focus-visible {
  outline: 2px solid var(--exp-accent, #f5c84b);
  outline-offset: 2px;
}

/* Table: the Calls table's header band, row lines and number font; the
   first column stays pinned while a narrow screen scrolls sideways. */
.sd3-rank-wrap {
  overflow-x: auto;
  border: 1px solid var(--sd3-line);
  border-radius: 8px;
  background: var(--sd3-panel);
}

.sd3-rank-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.sd3-rank-table th,
.sd3-rank-table td {
  min-width: 72px;
  padding: 0 16px;
  text-align: center;
  white-space: nowrap;
}

.sd3-rank-table thead th {
  height: 42px;
  border-bottom: 1px solid var(--sd3-line);
  background: var(--sd3-panel-2);
  color: #9ca6b5;
  font-family: var(--sd3-display);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.sd3-rank-table tbody th {
  width: 130px;
  height: 42px;
  color: #9ca6b5;
  font-family: var(--sd3-display);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.sd3-rank-table td {
  height: 42px;
  color: #c9d1d9;
  font-family: var(--sd3-mono);
  font-size: 13px;
}

.sd3-rank-table tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--sd3-panel);
}

.sd3-rank-table thead tr > :first-child {
  background: var(--sd3-panel-2);
}

.sd3-rank-table tbody tr + tr > * {
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.sd3-rank-table .rk {
  color: #f0f6fc;
  font-weight: 850;
}

.sd3-rank-table .pos {
  color: var(--sd3-green);
  font-weight: 850;
}

.sd3-rank-table .neg {
  color: var(--sd3-red);
  font-weight: 850;
}

.sd3-rank-table .na,
.sd3-rank-table thead th.na {
  color: var(--sd3-dim);
  font-weight: 400;
}

.sd3-rank-card .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Below this width the description moves under the identity, full width,
   three lines at most. */
@media (max-width: 920px) {
  .sd3-hero-v4 .sd3-hero-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .sd3-hero-about {
    padding-left: 0;
    border-left: 0;
    --sd3h-bio-lines: 3;
  }
}

/* Phones: the card goes edge to edge like the Performance card. */
@media (max-width: 760px) {
  .sd3-rank-card {
    width: 100vw;
    margin: 12px calc(50% - 50vw) 0;
    padding: 14px 0 12px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .sd3-rank-head {
    margin: 0 8px 10px;
    padding-bottom: 8px;
  }

  .sd3-rank-title {
    font-size: 16px;
  }

  .sd3-rank-wrap {
    margin: 0 8px;
  }

  .sd3-rank-table th,
  .sd3-rank-table td {
    min-width: 64px;
    padding: 0 12px;
  }

  .sd3-rank-table tbody th {
    width: auto;
    min-width: 108px;
  }

  .sd3-rank-table tbody th,
  .sd3-rank-table td {
    height: 40px;
  }
}

@media (max-width: 720px) {
  .sd3-hero-v4 .sd3-identity {
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
  }

  .sd3-hero-v4 .sd3-avatar {
    width: 52px;
    height: 52px;
  }

  .sd3-hero-v4 .sd3-title {
    font-size: 19px;
  }

  .sd3-hero-v4 .sd3-role {
    font-size: 12px;
  }

  .sd3-hero-v4 .sd3-hero-main {
    gap: 12px;
  }

  .sd3-hero-bio,
  .sd3-hero-more {
    font-size: 12.5px;
  }
}