/* =====================================================================
 * Portfolio - the fleet cockpit (js/views/portfolio.view.js, #/portfolio)
 *
 * Base rules live in components.css; this file is refinements only, same
 * convention as dashboard.css. Nothing here is loaded conditionally - the
 * classes simply do not appear in single-account mode.
 *
 * Etap 7.2 composition (the Tapebook mockup): one large figure and the
 * limits orbit on the page itself, then windows that each carry their own
 * small data graphic - the days of the range, the attention cards with the
 * RiskDeck panel's limit bar, the account tiles with a sparkline, a ring and
 * a challenge badge on their bottom edge. Everything is written against the
 * tokens, so the classic look renders the same composition in its colours.
 * ================================================================== */

/* A cockpit is denser than a single-account dashboard: more sections, each
   shallower. The section rhythm is tightened a step so the fold lands after
   the fleet table rather than in the middle of it. */
.view-container--fleet {
  gap: calc(var(--section-gap) * 0.8);
}

/* ---- Section wrapper (heading outside the card) ----------------------
   Attention and Accounts are SECTIONS, not cards: their heading belongs to
   the page, and what sits below it is a grid of cards or a table. Putting
   the title inside a card would make the two read as two more widgets
   rather than as the two halves of the cockpit. */

.fleet-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fleet-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.fleet-section__title {
  font-size: var(--fs-title1);
  letter-spacing: -0.01em;
}

.fleet-section__meta {
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
 * 1. Hero: the headline and the limits orbit
 * ================================================================== */

.pf-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
}

.pf-hero__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.pf-hero__figure-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4) var(--space-5);
  flex-wrap: wrap;
}

.pf-hero__figure {
  font-family: var(--font-family-display);
  font-size: clamp(3.5rem, 2rem + 4vw, 5.5rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.05em;
}

.pf-hero__unit {
  font-size: 0.4em;
  font-weight: 300;
  letter-spacing: 0;
  margin-left: 0.08em;
  color: var(--color-text-tertiary);
}

.pf-hero__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0.55em;
}

.pf-hero__note {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
  max-width: 60ch;
}

.pulse__note {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

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

/* Stats and money: the kv cells live in css/components/compose.css. */
.pf-kv,
.pf-hero__money {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.pf-hero__money {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 50%;
}

.pf-orbit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.pf-orbit .orbit {
  max-width: 300px;
}

.pf-orbit__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
}

.pf-orbit__value {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.03em;
}

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

/* The range's discipline figure, sitting on the orbit's edge. */
.pf-orbit__badge {
  position: absolute;
  top: -2px;
  left: -34px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: var(--fs-caption);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.pf-orbit__badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-profit);
}

.pf-orbit__badge.is-breached::before {
  background: var(--color-loss);
}

.pf-orbit__legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-5);
  width: 100%;
  max-width: 360px;
}

.pf-orbit__row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
}

.pf-orbit__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.pf-orbit__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-orbit__pct {
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.pf-orbit__caption {
  margin: 0;
  max-width: 360px;
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

/* Open positions are open risk: the one place blue is used. */
.pf-open-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  vertical-align: 1px;
  background: var(--tb-open, var(--color-accent));
}

/* ---- Card heads shared by the new windows ---- */
.pf-mini-row {
  display: flex;
  gap: var(--space-6);
}

.pf-mini {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.pf-mini__value {
  font-size: var(--fs-title3);
  font-weight: 400;
  letter-spacing: -0.02em;
}

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

/* ---- Attention beside the day layer; Performance beside Recent ---- */
.pf-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-6);
  align-items: start;
}

.pf-split--perf {
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
}

.pf-split__main,
.pf-split__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

/* =====================================================================
 * 2. Attention
 * ================================================================== */

.attn-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* A button: the whole card is one action ("open this account"). */
.attn-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-5) var(--space-5) var(--space-5);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
  background: var(--tb-window, var(--color-surface));
  color: var(--color-text-primary);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard);
}

.attn-card:hover {
  border-color: var(--color-border-strong);
}

.attn-card--critical {
  border-color: color-mix(in srgb, var(--color-loss) 32%, transparent);
}

.attn-card--static {
  cursor: default;
}

.attn-card__head,
.attn-card__main,
.attn-card__rest,
.attn-card__id,
.attn-item {
  display: flex;
}

.attn-card__head {
  align-items: center;
  gap: var(--space-3);
}

.attn-card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
}

.attn-card--critical .attn-card__icon {
  color: var(--color-loss);
  border-color: color-mix(in srgb, var(--color-loss) 50%, transparent);
}

.attn-card--warning .attn-card__icon {
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 50%, transparent);
}

.attn-card--info .attn-card__icon {
  color: var(--color-text-secondary);
}

.attn-card__id {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

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

.attn-card__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
}

.attn-card__ccy {
  font-size: 10.5px;
}

.attn-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 6px 8px 6px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.attn-card__cta-icon {
  transform: rotate(-90deg);
}

.attn-card:hover .attn-card__cta {
  color: var(--color-text-primary);
}

.attn-card__main {
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.attn-item {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.attn-item__label {
  font-size: var(--fs-footnote);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.attn-item__detail {
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
  line-height: 1.4;
}

.attn-card__pct {
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}

.attn-card__pct--critical {
  color: var(--color-loss);
}

.attn-card__pct--warning {
  color: var(--color-warning);
}

/* Secondary items side by side under a rule, each marked with a short dash
   (the house list bullet). */
.attn-card__rest {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3) var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.attn-card__rest .attn-item {
  position: relative;
  padding-left: var(--space-4);
}

.attn-card__rest .attn-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background: var(--tb-amber, var(--color-text-tertiary));
}

.attn-card__rest .attn-item__label {
  font-size: var(--fs-caption);
}

.attn-streak {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.attn-streak i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-loss);
}

/* Clean state. A real statement, never an empty box. */
.attn-clear {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
  background: var(--tb-window, var(--color-surface));
}

.attn-clear__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-profit) 45%, transparent);
  color: var(--color-profit);
}

.attn-clear__title {
  font-weight: var(--fw-semibold);
}

.attn-clear__sub {
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

/* =====================================================================
 * 3. Fleet table
 * ================================================================== */

/* The table draws its own row separators and needs to reach the card edge,
   so the card contributes the frame and nothing else. */
.card--flush {
  padding: 0;
  overflow: hidden;
}

/* Wide content scrolls inside its own container - the page body must never
   scroll horizontally (see the CLAUDE.md invariant). */
.fleet-table-wrap {
  overflow-x: auto;
  scrollbar-gutter: stable;
}

.fleet-table {
  min-width: 860px;
}

/* Column-group header. This row is the answer to "which of these numbers
   is live and which follows the period selector" - saying it is cheaper and
   more honest than forcing every column onto one basis. */
.fleet-table__grouprow th {
  padding-bottom: 0;
  border-bottom: none;
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
}

.fleet-table__group {
  position: relative;
  padding-top: var(--space-4);
}

.fleet-table__group::after {
  content: "";
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: -2px;
  height: 1px;
  background: var(--color-border);
}

.fleet-th--sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard);
}

.fleet-th--sortable:hover {
  color: var(--color-text-secondary);
}

.fleet-th--sortable.is-active {
  color: var(--color-text-primary);
}

.fleet-th__arrow {
  margin-left: 4px;
  font-size: 9px;
}

.fleet-row {
  cursor: pointer;
}

/* A hairline on the left edge repeats the attention rail from the section
   above, so an account that was flagged there is recognisable here without
   a second badge in every row. */
.fleet-row td:first-child {
  box-shadow: inset 3px 0 0 transparent;
}

.fleet-row--critical td:first-child { box-shadow: inset 3px 0 0 var(--color-loss); }
.fleet-row--warning td:first-child { box-shadow: inset 3px 0 0 var(--color-warning); }
.fleet-row--info td:first-child { box-shadow: inset 3px 0 0 var(--color-accent); }

.fleet-cell--num {
  text-align: right;
  white-space: nowrap;
}

.fleet-cell__empty {
  font-size: var(--fs-caption);
}

.fleet-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* Same colour as this account's line in the comparison chart, assigned by
   position in the fleet - so it survives a re-sort. */
.fleet-name__dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: 0 0 8px;
}

.fleet-name__text {
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fleet-name__flag {
  display: inline-flex;
  flex: 0 0 auto;
}

.fleet-name__flag--critical { color: var(--color-loss); }
.fleet-name__flag--warning { color: var(--color-warning); }
.fleet-name__flag--info { color: var(--color-accent); }

.fleet-name__sub {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.fleet-open {
  margin-left: 4px;
  font-size: var(--fs-caption);
  color: var(--color-accent);
}

/* ---- Risk budget cell ---- */

.fleet-risk {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 132px;
}

.fleet-risk__row {
  display: grid;
  grid-template-columns: 12px minmax(48px, 1fr) 34px;
  align-items: center;
  gap: var(--space-2);
}

.fleet-risk__label {
  font-size: 10px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.05em;
}

.fleet-risk__meter {
  height: 5px;
}

.fleet-risk__pct {
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- Challenge cell ---- */

.fleet-chal {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 150px;
}

.fleet-chal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.fleet-chal__name {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.fleet-chal__meter {
  height: 4px;
  margin-top: 2px;
}

/* ---- Mobile: the table becomes one card per account -----------------
   components.css already turns .data-table into stacked cards below 700px
   using the data-label attributes the row renderer emits. Only the pieces
   that are specific to this table need adjusting - one rendering path, no
   parallel markup. */
@media (max-width: 700px) {
  .fleet-table {
    min-width: 0;
  }

  .fleet-table-wrap {
    overflow-x: visible;
  }

  .fleet-row td:first-child,
  .fleet-row--critical td:first-child,
  .fleet-row--warning td:first-child,
  .fleet-row--info td:first-child {
    box-shadow: none;
  }

  /* The severity rail moves to the card itself, where it reads the same way
     it does on an attention card. */
  .fleet-row {
    position: relative;
    padding-left: var(--space-3);
  }

  .fleet-row::before {
    content: "";
    position: absolute;
    inset: var(--space-2) auto var(--space-2) 0;
    width: 3px;
    border-radius: var(--radius-pill);
    background: transparent;
  }

  .fleet-row--critical::before { background: var(--color-loss); }
  .fleet-row--warning::before { background: var(--color-warning); }
  .fleet-row--info::before { background: var(--color-accent); }

  .fleet-risk,
  .fleet-chal {
    min-width: 0;
    width: 100%;
    max-width: 60%;
  }

  .fleet-cell--num {
    text-align: right;
  }
}

/* =====================================================================
 * 4. Chart legend
 *
 * Doubles as the ranked summary of the comparison: each entry carries the
 * account's cumulative R for the period, which is the number the chart is
 * about. Tapping one hides that line.
 * ================================================================== */

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
}

.chart-legend:empty {
  display: none;
}

.chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 30px;
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: none;
  font-size: var(--fs-caption);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
    opacity var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}

.chart-legend__item:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-strong);
}

/* Hidden series stay legible - they are still a row you can bring back, not
   disabled controls. */
.chart-legend__item.is-off {
  opacity: 0.45;
}

.chart-legend__item.is-off .chart-legend__swatch {
  filter: grayscale(1);
}

.chart-legend__swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: 0 0 9px;
}

.chart-legend__name {
  color: var(--color-text-secondary);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-legend__value {
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
 * Etap 6.1 - Portfolio as the home page
 *
 * The page header and the pulse are part of the PAGE, not cards: that is
 * the visual difference between the portfolio and one account's dashboard
 * (whose headline is a hero card). Account tiles carry the account's colour
 * as a bar on the top edge of a rounded card, clipped by its radius - the
 * card keeps its corners (operator, 2026-09-19).
 * ================================================================== */

.pf-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.pf-head__eyebrow {
  display: flex;
}

.pf-head__title {
  margin-top: var(--space-2);
  font-family: var(--font-family-display);
  font-size: var(--fs-large);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.pf-head__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

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

/* ---- Account tiles ----------------------------------------------------
   A tile per account (Etap 7.2): identity, the balance in its own currency
   with small cents, a sparkline of cumulative R, the range result and a
   win-rate ring, the weekly limit as the RiskDeck panel's bar, and the
   challenge as a badge sitting on the bottom edge. The colour bar stays on
   the top edge, clipped by the radius (operator, 2026-09-19). */

.acct-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-5);
  padding: 12px 0 18px;
}

.acct-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: var(--space-5) var(--space-5) var(--space-5);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acct) 6%, transparent), transparent 46%), var(--tb-window, var(--color-surface));
  color: var(--color-text-primary);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard);
}

.acct-tile--has-chal {
  padding-bottom: calc(var(--space-5) + 12px);
}

/* The bar's clipping layer covers the tile's border box and takes its
   radius, so the bar follows the rounded corner. */
.acct-tile__edge {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.acct-tile__edge::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--space-6);
  width: 36px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--acct);
}

.acct-tile:hover {
  border-color: var(--color-border-strong);
}

/* The state flag sits on the tile's corner. */
.acct-tile__flag {
  position: absolute;
  top: -12px;
  right: -10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 0 0 4px var(--color-bg);
  z-index: 1;
}

.acct-tile__flag--critical {
  color: var(--color-loss);
  border: 1px solid color-mix(in srgb, var(--color-loss) 60%, transparent);
}

.acct-tile__flag--warning {
  color: var(--color-warning);
  border: 1px solid color-mix(in srgb, var(--color-warning) 55%, transparent);
}

.acct-tile__flag--info {
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-strong);
}

.acct-tile__top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--fs-footnote);
  font-weight: var(--fw-semibold);
}

.acct-tile__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--acct);
}

.acct-tile__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-tile__ccy {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
}

.acct-tile__bal {
  font-family: var(--font-family-display);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.acct-tile__cents {
  font-size: 0.55em;
  color: var(--color-text-tertiary);
  letter-spacing: -0.01em;
}

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

.acct-tile .spark {
  margin: var(--space-3) 0 var(--space-2);
}

.acct-tile .spark--empty {
  margin: var(--space-3) 0 var(--space-2);
}

.acct-tile__stats {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}

.acct-tile__res {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.acct-tile__result {
  font-size: var(--fs-title3);
  font-weight: 400;
  letter-spacing: -0.02em;
}

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

.acct-tile__wr {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.acct-tile__wr-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

.acct-tile__wr-text b {
  font-size: var(--fs-footnote);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.acct-tile__week {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.acct-tile__week-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
}

.acct-tile__week-row .tb-label {
  font-size: 10px;
}

/* The challenge badge sits on the tile's bottom edge. */
.acct-tile__chal {
  position: absolute;
  left: var(--space-4);
  bottom: -15px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: calc(100% - 2 * var(--space-4));
  height: 30px;
  padding: 0 11px 0 6px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  box-shadow: 0 0 0 4px var(--color-bg);
  font-size: 11.5px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  z-index: 1;
}

.acct-tile__chal-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.acct-tile__chal b {
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.acct-tile__chal--failed {
  border-color: color-mix(in srgb, var(--color-loss) 55%, transparent);
}

.acct-tile__chal--failed b {
  color: var(--color-loss);
}

.acct-tile__chal--passed b {
  color: var(--color-profit);
}

/* ---- Recent trades (the compact list, dashboard.view.js recentListHtml) ---- */
.pf-recent .trade-list__row:first-child {
  padding-top: 0;
}

/* Where the money chart went under mixed currencies (hard rule 14). */
.chart-card__note {
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--color-text-tertiary);
}

.chart-card__note:empty {
  display: none;
}

@media (max-width: 1080px) {
  .pf-hero,
  .pf-split,
  .pf-split--perf {
    grid-template-columns: minmax(0, 1fr);
  }

  .pf-hero__money {
    max-width: none;
  }
}

@media (max-width: 700px) {
  .pf-head__title {
    font-size: var(--fs-title1);
  }

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

  .pf-orbit__badge {
    left: -8px;
  }

  .pf-mini-row {
    width: 100%;
    justify-content: space-between;
  }

  .pf-mini {
    align-items: flex-start;
  }

  /* Tiles scroll sideways on a phone rather than stacking four tall cards
     above everything else on the page. */
  .acct-tiles {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(var(--space-4) * -1);
    padding: 14px var(--space-4) 22px;
  }

  .acct-tile {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
}