/* Influencer profile (/influencer/:permalink)
   A channel's record read as instrumentation: who the caller is, what their
   tape returned, and which assets that number is made of. Construction
   follows the board on /top-influencer — flat surfaces, hairlines instead of
   gaps, mono figures carrying every comparable number. */

/* ============ Masthead ============ */
.profile-masthead {
  padding: 3rem 0 0;
}

/* The portfolio page reuses the identity block without a scoreboard beneath
   it, so it closes its own band. */
.profile-masthead--plain {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

.profile-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

/* The avatar identifies the channel; it is not the subject of the page, so it
   sits at label scale rather than portrait scale. */
.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-highlight);
  border: 1px solid var(--border);
}
.profile-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-identity-text {
  min-width: 0;
}

.profile-name {
  margin: 0 0 0.35rem;
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  overflow-wrap: anywhere;
}

.profile-subtitle {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.profile-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.profile-youtube {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text-muted);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.profile-youtube:hover {
  background: var(--bg-highlight);
  border-color: var(--text-muted);
  color: var(--text-bright);
}
.profile-youtube:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

/* ============ Scoreboard strip ============ */
.profile-board {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  margin: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.profile-cell {
  padding: 1.1rem 1.25rem;
  border-left: 1px solid var(--border);
  min-width: 0;
}
.profile-cell:first-child {
  padding-left: 0;
  border-left: 0;
}

.profile-cell dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-muted);
}

.profile-cell dd {
  margin: 0.5rem 0 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text-bright);
  white-space: nowrap;
}

/* The 12-month return is the figure the page exists to report; every other
   cell is the evidence standing behind it. */
.profile-cell dd.profile-figure {
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  /* pt and fr write the decimal as a comma, and a monospace comma sits in a
     full advance — at display size the separator reads as its own token.
     Pulling the tracking in closes the gap without breaking the column. */
  letter-spacing: -0.03em;
}
.profile-figure.positive { color: var(--success); }
.profile-figure.negative { color: var(--danger); }
.profile-figure-empty { color: var(--text-dim); }

.profile-trace {
  border-bottom: 1px solid var(--border);
}
.profile-trace .index-sparkline {
  display: block;
  /* The viewBox is a drawing grid, not a size. Without an explicit width the
     SVG resolves its own from the viewBox ratio and sits at ~320px in a
     full-width slot. */
  width: 100%;
  height: 96px;
}

/* ============ Call tape ============ */
.calls-section {
  background: var(--bg-main);
  padding: 2.75rem 0 0;
}

.calls-more {
  margin: 0.9rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.calls {
  --calls-cols: minmax(6rem, 1fr) 8rem minmax(4rem, 1.6fr) 4.5rem 7rem;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.calls-head,
.calls-row {
  display: grid;
  grid-template-columns: var(--calls-cols);
  align-items: center;
  gap: 0 1rem;
  padding: 0.8rem 1.1rem;
}

.calls-head {
  border-bottom: 1px solid var(--border);
  background: var(--bg-darker);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
}
.calls-col--right { text-align: right; }

.calls-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.calls-entry { display: block; }
.calls-entry + .calls-entry { border-top: 1px solid var(--border-light); }

.calls-row {
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease;
}
.calls-row:hover { background: var(--bg-highlight); }
.calls-row:focus-visible {
  outline: none;
  background: var(--bg-highlight);
  box-shadow: inset 0 0 0 2px var(--primary);
}

.calls-asset {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
}
.calls-ticker {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-bright);
  transition: color 0.15s ease;
}
.calls-row:hover .calls-ticker { color: var(--primary); }

.calls-exchange {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* An asset called both ways carries two tags. They stay on one line so a
   mixed-direction row keeps the same height as every other row and the tape
   scans as a single rhythm. */
.calls-action {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
}
/* Buy and sell name a direction the caller chose, not a result the market
   delivered, so they stay hollow and neutral — the return column owns colour. */
.calls-action-tag {
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  white-space: nowrap;
}
.calls-action-tag--buy { color: var(--text); }
.calls-action-tag--sell {
  border-style: dashed;
  color: var(--text);
}

/* Read against the strongest call on this channel's tape, so the falloff is
   the message and nothing is filled to the track by a clamp. */
.calls-bar {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--bg-highlight);
  overflow: hidden;
}
.calls-bar-fill {
  display: block;
  height: 100%;
  transform-origin: left center;
  animation: calls-bar-draw 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.calls-bar-fill.positive { background: var(--success); }
.calls-bar-fill.negative { background: var(--danger); }

@keyframes calls-bar-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.calls-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}

.calls-move {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.calls-move.positive { color: var(--success); }
.calls-move.negative { color: var(--danger); }

.calls-cell-label { display: none; }

@media (prefers-reduced-motion: reduce) {
  .calls-bar-fill { animation: none; }
}

/* ============ Sort + pagination controls ============ */
.per-page-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.per-page-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.per-page-select {
  padding: 0.45rem 0.7rem;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.per-page-select:hover {
  border-color: var(--text-muted);
  color: var(--text-bright);
}

.per-page-select:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.pagination-container {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  padding: 1.25rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 3px;
}

.pagination {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.pagination .page,
.pagination .first,
.pagination .last,
.pagination .prev,
.pagination .next {
  border-radius: 2px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.8rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pagination .page:hover,
.pagination .first:hover,
.pagination .last:hover,
.pagination .prev:hover,
.pagination .next:hover {
  background: var(--bg-highlight);
  border-color: var(--text-muted);
  color: var(--text-bright);
}

.pagination .page a,
.pagination .first a,
.pagination .last a,
.pagination .prev a,
.pagination .next a {
  display: block;
  padding: 0.45rem 0.8rem;
  border-radius: 2px;
  color: inherit;
  text-decoration: none;
}

.pagination .current {
  padding: 0.45rem 0.8rem;
  background: var(--primary-dark);
  color: #f2efe4;
  border-color: var(--primary);
  font-weight: 600;
}

.pagination .gap {
  color: var(--text-muted);
  padding: 0 0.4rem;
}

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .profile-board {
    grid-template-columns: 1fr 1fr;
  }
  /* The lead figure keeps its own row so the return never shares a baseline
     with a count it dwarfs. */
  .profile-cell--lead {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--border);
  }
  .profile-cell:nth-child(2),
  .profile-cell:nth-child(4) {
    padding-left: 0;
    border-left: 0;
  }
  .profile-cell:nth-child(4),
  .profile-cell:nth-child(5) {
    border-top: 1px solid var(--border);
  }
}

/* One asset reflows to three lines: ticker and return on the first, the bar
   spanning beneath, then the direction and how many calls back it. Column
   headers give way to inline labels so no bare count loses its name. */
@media (max-width: 768px) {
  .profile-masthead {
    padding: 2rem 0 0;
  }
  .profile-identity {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem 1rem;
    margin-bottom: 1.5rem;
  }
  .profile-actions {
    grid-column: 1 / -1;
  }
  .profile-actions .btn {
    flex: 1;
    justify-content: center;
  }

  .calls-section {
    padding: 2.25rem 0 0;
  }
  .calls-head { display: none; }
  .calls-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "asset  move"
      "bar    bar"
      "action count";
    gap: 0.65rem 0.75rem;
    padding: 0.95rem 1rem;
  }
  .calls-asset  { grid-area: asset; }
  .calls-move   { grid-area: move; }
  .calls-bar    { grid-area: bar; }
  .calls-action { grid-area: action; }
  .calls-count  { grid-area: count; }
  .calls-count .calls-cell-label {
    display: inline;
    margin-right: 0.4rem;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
  }

  .per-page-form {
    flex-wrap: wrap;
    width: 100%;
    gap: 0.5rem;
  }
  .per-page-form .per-page-select {
    flex: 1;
    min-width: 8rem;
    min-height: 44px;
  }
}

/* The evidence cells stay paired rather than stacking — five full-width rows
   push the call tape off the first screen, and pairing keeps the strip
   readable as one block. */
@media (max-width: 480px) {
  .profile-cell {
    padding: 0.9rem 1rem;
  }
  .profile-cell dd {
    font-size: 1.15rem;
  }
  .profile-avatar {
    width: 48px;
    height: 48px;
  }
}