/* Influencer book (/influencer/:permalink/portfolio)
   The 12-month portfolio derived from a channel's calls, read as a ledger of
   positions: what was called, at what price it was entered, and what the
   market has done to it since. Construction follows the call tape on the
   profile page — flat surfaces, hairlines instead of gaps, mono figures on
   every comparable number, and a single row that reflows rather than a table
   shadowed by a duplicate set of cards. */

/* ============ Summary strip ============ */
/* Four cells rather than the profile's five, so the lead figure keeps its
   width instead of stretching to fill a column it doesn't need. */
.profile-board--book {
  grid-template-columns: 1.6fr repeat(3, 1fr);
}

/* ============ Book section ============ */
.book-section {
  background: var(--bg-main);
  padding: 1.6rem 0 4rem;
}

.book-basis {
  margin-bottom: 3rem;
}

/* When the book was last rebuilt, as against the close it is marked to — two
   different freshness claims, so the stamp takes its own line rather than
   wrapping the marking basis onto a second one. */
.book-basis-stamp {
  display: block;
  margin-top: 0.35rem;
  color: var(--text-dim);
}

.book-block + .book-block {
  margin-top: 3.25rem;
}

.book-heading {
  margin: 0 0 0.4rem;
}

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

.book-note {
  color: var(--text-dim);
}
.book-note::before {
  content: "·";
  margin: 0 0.4rem;
}

/* ============ The book ============ */
.book {
  --book-cols: minmax(8rem, 1.7fr) 6rem 6.5rem 6.5rem 3.25rem minmax(3rem, 0.9fr) 6rem;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

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

.book-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);
}
.book-col--right { text-align: right; }

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

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

.book-asset {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.book-ticker {
  flex: none;
  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;
}
.book-row:hover .book-ticker { color: var(--primary); }

.book-exchange {
  flex: none;
  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;
}

/* Names run to a full ETF prospectus title. Recognition, not data — it takes
   whatever room the row has left and stops at one line, so forty-six rows
   keep one height and the column of figures stays readable. */
.book-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.book-date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.book-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}
/* The close the position is marked against carries the row's reading weight;
   the entry is the reference behind it. */
.book-price--last { color: var(--text-bright); }

.book-currency {
  color: var(--text-muted);
  margin-right: 0.05em;
}

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

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

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

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

.book-void { color: var(--text-dim); }

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

.book-empty {
  margin: 0;
  padding: 1.5rem 1.1rem;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

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

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .profile-board--book {
    grid-template-columns: 1fr 1fr;
  }
}

/* Between the full row and the stacked one there is no room for a legal name
   beside six columns of figures — the ticker and exchange still identify the
   asset, and the name returns once the row stacks. */
@media (max-width: 1024px) and (min-width: 769px) {
  /* With the name gone the asset column has slack and the price columns do
     not — pt and fr set the widest headers in the table. */
  .book {
    --book-cols: minmax(5rem, 0.6fr) 5.25rem 7rem 6.5rem 3rem minmax(2.5rem, 0.7fr) 6rem;
  }
  .book-head,
  .book-row {
    gap: 0 0.75rem;
    padding: 0.62rem 0.9rem;
  }
  .book-name { display: none; }
}

/* One position reflows to four lines: ticker and return on the first, the
   spread bar spanning beneath, then the two prices it was measured between,
   and last the evidence — when it was first called and how many times. Column
   headers give way to inline labels so no bare figure loses its name. */
@media (max-width: 768px) {
  .book-section {
    padding: 1.75rem 0 3rem;
  }

  .book-head { display: none; }

  .book-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "asset asset"
      "move  bar"
      "entry last"
      "date  calls";
    align-items: end;
    gap: 0.7rem 1rem;
    padding: 0.95rem 1rem;
  }

  .book-asset { grid-area: asset; flex-wrap: wrap; }
  .book-name  { flex-basis: 100%; }
  .book-move  { grid-area: move; text-align: left; font-size: 1.15rem; }
  .book-bar   { grid-area: bar; align-self: center; }
  .book-price--entry { grid-area: entry; text-align: left; }
  .book-price--last  { grid-area: last; text-align: right; }
  .book-date  { grid-area: date; }
  .book-calls { grid-area: calls; }

  .book-cell-label {
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
  }
  .book-move .book-cell-label { display: none; }
  .book-calls .book-cell-label { text-align: right; }
}

@media (max-width: 480px) {
  .book-row { padding: 0.9rem 0.8rem; }
  .book-block + .book-block { margin-top: 2.5rem; }
}