/* ==========================================================================
   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.
   ========================================================================== */

/* ---- Segmented controls, Apple style (look stage 2) ----
   A capsule track, a raised thumb on the one selected segment. The track and
   the thumb are the system's own greys; they are the only fixed values here.
   Shared by the account page, the Journal and the Ledger, which build their
   switches with TJ.Components.UI.pillToggle / unitToggle (their own class
   names are kept). */
/* --seg-track and --seg-thumb are the tokens at the top of form.css (one
   definition for every segmented control). */

:root[data-look] :is(.view-container--acct, .view-container--journal, .lg-view) .pill-toggle {
  gap: 0;
  padding: 2px;
  border: 0;
  border-radius: 999px;
  background: var(--seg-track);
  box-shadow: none;
}

:root[data-look] :is(.view-container--acct, .view-container--journal, .lg-view) .pill-toggle__opt {
  height: 28px;
  min-width: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

:root[data-look] :is(.view-container--acct, .view-container--journal, .lg-view) .pill-toggle__opt:hover {
  color: var(--text-1);
}

:root[data-look] :is(.view-container--acct, .view-container--journal, .lg-view) .pill-toggle__opt.is-active {
  background: var(--seg-thumb);
  color: var(--text-1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

@media (max-width: 880px), (pointer: coarse) {
  :root[data-look] :is(.view-container--acct, .view-container--journal, .lg-view) .pill-toggle__opt {
    height: 32px;
  }
}

/* Text wraps without a one-word last line, headings in even lines (the views, dialogs and the trade panel). */
:root[data-look] :is(.view-container--acct, .view-container--journal, .lg-view, .set-layout, .modal, .detail-drawer) :is(p, dd, .set-sub, .field__hint) {
  text-wrap: pretty;
}

:root[data-look] :is(.view-container--acct, .view-container--journal, .lg-view, .set-layout, .modal, .detail-drawer) :is(h1, h2, h3) {
  text-wrap: balance;
}

/* ---- Empty state: one sentence, left, and the one action under it. No icon,
   nothing centred; it stands where the content would. ---- */
.tb-empty,
.dv-empty,
.ac-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 8px 0 4px; /* flush with the window's title: 4px at the side read as a slip */
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-2);
}

.tb-empty > p,
.dv-empty > p {
  margin: 0;
}

/* ---- 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-1);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.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(--text-2);
}

.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;
  /* A wide toggle here must be able to shrink and scroll inside itself:
     without this the item kept its content's width, and the card cut the
     toggle off - four of the nine dictionary tabs could not be reached on
     a phone (mobile audit 2026-10-05). */
  min-width: 0;
  max-width: 100%;
}

.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);
}

/* "All trades", "Journal": a 20px line of text, a 44px tap area on touch
   (audit 2026-09-29, section 5; the license tag's pattern). */
@media (max-width: 880px), (pointer: coarse) {
  .pf-link {
    position: relative;
  }
  .pf-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

/* ---- 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: var(--fw-value);
  letter-spacing: var(--ls-value);
  line-height: 1.1;
  color: var(--color-text-primary);
}

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

/* ---- A large figure (a summary's lead) ---- */
/* The key figure: up to 56px, weight 500, -0.03em, tabular (one style with the account page's balance). */
.tb-figure {
  font-size: clamp(2.4rem, 1.6rem + 2vw, 3.5rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  white-space: nowrap;
}

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

/* ---- 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(--text-2);
}

.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: var(--fw-figure);
  letter-spacing: var(--ls-figure);
  line-height: 1.05;
}

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

.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: 999px;
}

.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(--text-2);
  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: 999px;
}

.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);
  min-height: 44px;
  padding: 10px 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;
}

/* A refusal in the day's rule log: a fact next to the trades, not a row that
   opens anything. The same quiet row as a trade (hairline above, no figure, no
   chip, regular weight); only the pointer and the underline on hover differ. */
.trade-list__row--rule {
  display: flex;
  cursor: default;
}

/* The label above refusals listed apart from the trades: the name, and in
   words that the times in the group are the platform's. */
.trade-list__group {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-1);
  border-top: 1px solid var(--color-border);
}

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

.trade-list__group + .trade-list__row {
  border-top: 0;
}

.trade-list__group-note {
  font-size: var(--fs-caption);
  color: var(--text-2);
}

.trade-list__row--rule:hover .trade-list__sym {
  text-decoration: none;
}

.trade-list__sym--rule {
  font-weight: var(--fw-regular);
  color: var(--color-text-secondary);
}

.trade-list__sym--rule.text-loss {
  color: var(--color-loss);
}

.trade-list__time {
  min-width: 5ch;
  color: var(--text-2);
}

.trade-list__note {
  font-size: var(--fs-caption);
  color: var(--text-2);
  overflow-wrap: anywhere;
}

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

.trade-list__sym {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 15px;
  font-weight: 600;
}

/* Direction is a word, not a chip. */
:root[data-look] .trade-list .trade-list__dir {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}

.trade-list__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 4px;
  font-size: 13px;
  color: var(--text-2);
}

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

.trade-list__sep {
  margin-left: -4px;
  color: var(--text-2);
}

.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: 15px;
  font-weight: 600;
}

/* The result: a filled tag, no outline, plain words. */
:root[data-look] .trade-list .trade-list__res {
  min-width: 44px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--tile);
  text-align: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
}

:root[data-look] .trade-list .trade-list__res--win {
  color: var(--gain);
  background: var(--color-profit-soft);
}

:root[data-look] .trade-list .trade-list__res--loss {
  color: var(--loss);
  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;
}

/* After the grid rule above: a refusal has one column. */
.trade-list--wide .trade-list__row--rule {
  display: flex;
}

.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(--text-2);
}

@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(--text-2);
}

@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));
  }
}

/* A phone: a summary is a small block - the lead figure 32px, the figures
   up to three to a row at 17px under 12px labels - so the calendar's month fits
   above its grid on one screen (the operator 21.10). */
@media (max-width: 560px) {
  .tb-summary {
    gap: var(--space-3);
  }

  .tb-summary__lead {
    gap: var(--space-2);
  }

  .tb-figure {
    font-size: 32px;
  }

  /* As many columns as fit at 84px (three on a 375px phone); two figures
     share the row instead of leaving a third column empty. */
  .tb-summary .tb-kv,
  .tb-kv {
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: var(--space-3) var(--space-2);
  }

  .tb-kv__item,
  .pf-kv__item {
    gap: 2px;
    padding-left: 10px;
  }

  .tb-kv__value,
  .pf-kv__value {
    font-size: 17px;
  }

  .tb-kv__hint,
  .pf-kv__hint {
    font-size: 11.5px;
  }

  :root[data-look] .tb-kv__item > .tb-label {
    font-size: 12px;
  }

  .tb-metric,
  .ac-metric {
    padding: 12px;
  }

  .tb-metric__value,
  .ac-metric__value {
    font-size: 18px;
  }
}