/* ==========================================================================
   Shared composition (js/components/compose.js, Etap 8)
   --------------------------------------------------------------------------
   The shapes every screen is built from: a card head (eyebrow + title), a
   period summary, kv cells, a window of figures with graphics, the trade
   list and diverging-bar rows. Portfolio and the account page introduced
   them in Etap 7 under pf-/ac- names, which stay as aliases.
   Written against the tokens, so they render in both looks.
   ========================================================================== */

/* ---- Card head ---- */
.tb-head,
.pf-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.tb-head h2,
.pf-card-head h2 {
  margin-top: var(--space-2);
  font-size: var(--fs-title2);
}

.tb-head--tight,
.pf-card-head--tight {
  margin-bottom: var(--space-3);
  align-items: flex-end;
}

.tb-head__sub,
.pf-card-head__sub {
  margin: var(--space-1) 0 0;
  max-width: 60ch;
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

.tb-head__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tb-head__aside {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pf-link {
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 3px;
}

.pf-link:hover {
  color: var(--color-text-primary);
}

/* ---- kv cells: a figure under a small label, split by a thin rule ---- */
.tb-kv {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: var(--space-4);
}

.tb-kv__item,
.pf-kv__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-border-strong);
}

.tb-kv__value,
.pf-kv__value {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-text-primary);
}

.tb-kv__hint,
.pf-kv__hint {
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

/* ---- A large figure (a summary's lead) ---- */
.tb-figure {
  font-family: var(--font-family-display);
  font-size: clamp(2.4rem, 1.6rem + 2vw, 3.4rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.tb-figure__unit {
  font-size: 0.42em;
  font-weight: 300;
  letter-spacing: 0;
  margin-left: 0.08em;
  color: var(--color-text-tertiary);
}

/* ---- Period summary: lead figure | kv cells, an optional graphic below ---- */
.tb-summary {
  display: grid;
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-5) var(--space-8);
}

.tb-summary__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.tb-summary__hint {
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

.tb-summary__art {
  grid-column: 1 / -1;
  min-width: 0;
}

.tb-summary .tb-kv {
  align-self: end;
}

/* ---- Figures with a small graphic each, in one window (the account
   page's four fixed KPIs, Analytics' twelve) ---- */
.tb-metrics,
.ac-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
  overflow: hidden;
}

.tb-metric,
.ac-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-5) var(--space-6);
  border-left: 1px solid var(--color-border);
}

.tb-metric:nth-child(4n + 1),
.ac-metric:nth-child(4n + 1) {
  border-left: 0;
}

.tb-metric:nth-child(n + 5),
.ac-metric:nth-child(n + 5) {
  border-top: 1px solid var(--color-border);
}

.tb-metric__row,
.ac-metric__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tb-metric__value,
.ac-metric__value {
  font-family: var(--font-family-display);
  font-size: 1.85rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.tb-metric__caption,
.ac-metric__caption {
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

.tb-pl,
.ac-pl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

.tb-pl__bar,
.ac-pl__bar {
  display: block;
  height: 4px;
  border-radius: 4px;
}

.tb-pl__bar--pos,
.ac-pl__bar--pos {
  background: var(--color-profit);
}

.tb-pl__bar--neg,
.ac-pl__bar--neg {
  background: var(--color-loss);
}

/* A smaller cell for the figures past the first row of a window. */
.tb-metric--small .tb-metric__value {
  font-size: 1.35rem;
}

/* ---- Rows with a diverging bar (Compose.divergingRows) ---- */
.tb-rows {
  display: flex;
  flex-direction: column;
}

.tb-rows__row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(90px, 1.2fr) 76px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-footnote);
}

.tb-rows__row:first-child {
  border-top: 0;
}

.tb-rows__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--fw-semibold);
}

.tb-rows__meta {
  min-width: 0;
  color: var(--color-text-tertiary);
  font-size: var(--fs-caption);
}

.tb-rows__value {
  text-align: right;
  font-weight: var(--fw-semibold);
}

.tb-dbar {
  position: relative;
  display: block;
  height: 6px;
}

.tb-dbar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: var(--color-border-strong);
}

.tb-dbar__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
}

.tb-dbar__fill--pos {
  background: var(--color-profit);
}

.tb-dbar__fill--neg {
  background: var(--color-loss);
}

/* ---- The trade list (Compose.tradeList) ---- */
.trade-list {
  display: block;
}

.trade-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  cursor: pointer;
}

.trade-list__row:first-child {
  border-top: 0;
}

.trade-list__row:hover .trade-list__sym,
.trade-list__row:focus-visible .trade-list__sym {
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 3px;
}

.trade-list__main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.trade-list__sym {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-footnote);
  font-weight: var(--fw-semibold);
}

.trade-list__dir {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  font-family: var(--font-family-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.trade-list__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

.trade-list__meta .acct-tag {
  font-size: inherit;
  color: var(--color-text-secondary);
}

.trade-list__sep {
  color: var(--color-text-tertiary);
}

.trade-list__end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

.trade-list__r {
  min-width: 64px;
  text-align: right;
  font-size: var(--fs-footnote);
  font-weight: var(--fw-semibold);
}

.trade-list__res {
  min-width: 42px;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  text-align: center;
  font-family: var(--font-family-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.trade-list__res--win {
  color: var(--color-profit);
  border-color: color-mix(in srgb, var(--color-profit) 40%, transparent);
  background: var(--color-profit-soft);
}

.trade-list__res--loss {
  color: var(--color-loss);
  border-color: color-mix(in srgb, var(--color-loss) 40%, transparent);
  background: var(--color-loss-soft);
}

.trade-list--wide .trade-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr) auto;
}

.trade-list__col {
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trade-list__col--dim {
  color: var(--color-text-tertiary);
}

@media (max-width: 700px) {
  .trade-list--wide .trade-list__row {
    display: flex;
  }

  .trade-list--wide .trade-list__col {
    display: none;
  }
}

@media (max-width: 700px) {
  .tb-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .tb-kv {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-4);
  }

  .tb-rows__row {
    grid-template-columns: minmax(0, 1fr) minmax(70px, 0.8fr) 64px;
  }

  .tb-rows__meta {
    display: none;
  }

  .tb-metrics,
  .ac-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tb-metric,
  .ac-metric {
    padding: var(--space-4);
  }

  .tb-metric:nth-child(odd),
  .ac-metric:nth-child(odd) {
    border-left: 0;
  }

  .tb-metric:nth-child(even),
  .ac-metric:nth-child(even) {
    border-left: 1px solid var(--color-border);
  }

  .tb-metric:nth-child(n + 3),
  .ac-metric:nth-child(n + 3) {
    border-top: 1px solid var(--color-border);
  }

  .tb-metric__row,
  .ac-metric__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .tb-metric__value,
  .ac-metric__value {
    font-size: 1.5rem;
  }
}

/* The kv value sets its own ink, which the sign classes a caller passes
   (text-profit / text-loss / text-tertiary) must still win over. */
.tb-kv__value.text-profit,
.pf-kv__value.text-profit {
  color: var(--color-profit);
}

.tb-kv__value.text-loss,
.pf-kv__value.text-loss {
  color: var(--color-loss);
}

.tb-kv__value.text-tertiary,
.pf-kv__value.text-tertiary {
  color: var(--color-text-tertiary);
}

@media (max-width: 1080px) {
  .tb-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .tb-summary .tb-kv {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--space-4);
  }
}

@media (max-width: 700px) {
  .tb-summary .tb-kv {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}