/* =====================================================================
 * 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;
}


/* Shared with the account page's headline. */
.pf-hero__unit {
  font-size: 0.4em;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  margin-left: 0.08em;
  color: var(--color-text-tertiary);
}

/* =====================================================================
 * 1. The desk: the bottom half of the one framed card (the top menu is its
 *    top half, css/layout.css), as tall as its content. The status line (the
 *    scope line, the Equity title with the period switch, the display), the
 *    lead (the number, four figures) and the chart.
 * ================================================================== */

.view-container--fleet {
  --pf-gutter: var(--section-gap);
  padding-top: 0;
}

@media (max-width: 560px) {
  .view-container--fleet {
    --pf-gutter: var(--space-4);
    gap: var(--space-3);
  }
}

.pf-desk,
.pf-below {
  /* v12's text size; the app's own is a step larger. */
  font-size: 13px;
}

.pf-desk {
  container: pfdesk / inline-size;
  /* Out to the container's edge, back in by the frame: the card's width is
     the top bar's. Its look (colour, corners, edge, shadow) is .desk's. */
  margin: 0 calc(var(--pf-gutter) * -1 + var(--frame));
  display: flex;
  flex-direction: column;
  padding: 18px 40px 34px;
}

/* The desk's tooltips are sentences: they wrap. */
.pf-desk [data-tooltip]::after {
  width: max-content;
  max-width: min(260px, 70vw);
  white-space: normal;
  line-height: 1.35;
}

/* ---- The status line: on the left the scope line, the Equity title with the
   period switch and its sentence; on the right the display. The Equity title
   sits under the scope line, so the display's height does not leave a band
   above the number. ---- */
.pf-status {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}

.pf-status__l {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* The scope: a quiet line, not a picker (the top bar's Accounts menu switches). */
.pf-acct {
  font-size: 13px;
  color: var(--text-2);
}

/* A touch target larger than the control, without a larger control. */
.pf-seg button::before,
.pf-leg__b::before {
  content: "";
  position: absolute;
  inset: -8px -6px;
}

.pf-seg button:focus-visible,
.pf-leg__b:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---- The display: narrower, and easy to read - the date large, the label a
   quiet line above the message, the message in the full text colour ---- */
.pf-disp {
  position: relative;
  margin-left: auto;
  min-width: 0;
  width: min(460px, 42%);
  max-width: 460px;
}

.pf-disp .vdisp__date {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pf-disp .vdisp__msg {
  margin-top: 8px;
  min-height: calc(2 * 1.3em + 20px);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-1);
}

.pf-disp .vdisp__k {
  display: block;
  margin: 0 0 3px;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  vertical-align: baseline;
}

.pf-disp .vdisp__dot::before {
  height: 3px;
}

/* The dots sit on the date's row, at the right: the display is then no taller
   than the Equity block beside it, and the desk has no band above the number. */
.pf-disp .vdisp__dots {
  position: absolute;
  top: 4px;
  right: -4px;
  margin: 0;
}

/* ---- The lead and the chart ---- */
.pf-main {
  flex: 1;
  display: grid;
  grid-template-columns: 370px minmax(0, 1fr);
  margin-top: 6px;
  align-items: stretch;
}

.pf-lead {
  min-width: 0;
}

:root[data-look] .pf-lead__title,
.pf-lead__title {
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

:root[data-look] .pf-lead__title {
  font-weight: 600;
}

/* The period switch: Apple's segmented control - a capsule track, a raised thumb. */
.pf-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: var(--seg-track);
}

.pf-seg button {
  position: relative;
  min-width: 36px;
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-2);
  cursor: pointer;
}

.pf-seg button[aria-pressed="true"] {
  background: var(--seg-thumb);
  color: var(--seg-ink);
  box-shadow: var(--seg-lift);
}

.pf-lead__d {
  max-width: 300px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-2);
}

/* A size container so the number can be sized against the column it sits
   in (cqi below), whatever the desk's layout. */
.pf-lead__body {
  container-type: inline-size;
  min-width: 0;
}

.pf-big {
  --fig-max: 72px;
  margin-top: 10px;
  font-family: var(--font-family-display);
  font-size: min(var(--fig-max), calc(100cqi / (var(--len, 5) * 0.6 + 0.5)));
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.86;
  color: var(--text-1);
  white-space: nowrap;
}

.pf-big small {
  margin-left: 0.04em;
  font-size: 0.31em;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--text-2);
}

/* Nothing closed in the period: one sentence and one action, no giant zero. */
.pf-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--text-2);
}

.pf-empty__a {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lead);
  cursor: pointer;
}

.pf-empty__a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pf-bigsub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-2);
}

.pf-dl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gain);
  background: color-mix(in srgb, var(--gain) 14%, transparent);
}

.pf-dl.is-down {
  color: var(--loss);
  background: color-mix(in srgb, var(--loss) 14%, transparent);
}

/* On light the pill's text is a shade darker, so it reads at 4.5:1 on its own tint. */
:root[data-theme="light"] .pf-dl {
  color: color-mix(in srgb, var(--gain) 80%, #000);
}

:root[data-theme="light"] .pf-dl.is-down {
  color: color-mix(in srgb, var(--loss) 80%, #000);
}

.pf-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  max-width: 320px;
  margin-top: 26px;
}

.pf-kpis b {
  display: block;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.pf-kpis > div {
  display: flex;
  flex-direction: column;
}

.pf-kpis span {
  font-size: 13px;
  color: var(--text-2);
}

.pf-chart {
  position: relative;
  min-width: 0;
  min-height: 320px;
}

/* The equity line and the grid of the desk's chart (js/components/charts.js heroChart). A finer line, a quieter
   grid; the line's draw-on motion is css/animations.css (.tb-line--draw), played once by TJ.Components.EntryMotion. */
.pf-chart .tb-line {
  stroke-width: 1.6px;
}

.pf-chart .tb-grid {
  stroke-opacity: 0.55;
}

.pf-leg {
  position: absolute;
  left: 8px;
  bottom: -2px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--text-2);
}

.pf-leg i {
  display: inline-block;
  width: 14px;
  height: 3px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: middle;
}

/* The legend's two toggles are plain text with their swatch: no chip. Off is the
   quiet text tone with a faded swatch (opacity on the text took it to 2.3:1);
   on is the full tone. */
.pf-leg__b {
  position: relative;
  padding: 4px 6px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--text-3);
  cursor: pointer;
}

.pf-leg__b i {
  opacity: 0.45;
}

.pf-leg__b.is-on {
  color: var(--text-2);
}

.pf-leg__b.is-on i {
  opacity: 1;
}

/* ---- Phone (v12 .app at 500px): number, four figures in a row, chart ---- */
@container pfdesk (max-width: 640px) {
  /* The scope, the display, then the Equity title: the left column's
     children become the status line's own items and are put in that order. */
  .pf-status {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: 6px;
  }

  .pf-status__l {
    display: contents;
  }

  .pf-acct {
    order: 0;
  }

  .pf-disp {
    order: 1;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
  }

  .pf-disp .vdisp__date {
    font-size: 15px;
    font-weight: 600;
  }

  /* On a phone the date takes the row: the dots go back under the message. */
  .pf-disp .vdisp__dots {
    position: static;
    margin: 6px 0 0 -4px;
  }

  .pf-disp .vdisp__msg {
    margin-top: 2px;
    min-height: calc(2 * 1.3em);
    font-size: 13px;
  }

  .pf-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    margin-top: 0;
  }

  :root[data-look] .pf-lead__title,
  .pf-lead__title {
    order: 2;
    margin-top: 2px;
    justify-content: space-between;
    font-size: 17px;
  }

  .pf-lead__d {
    display: none;
  }

  /* The operator 21.10: the 84px figure and the roomy rows made the phone
     look like a computer screen shrunk; the figure is 52px and the four
     figures one small tile. */
  .pf-big {
    --fig-max: 52px;
    margin-top: 6px;
  }

  .pf-bigsub {
    margin-top: 8px;
  }

  /* Columns as wide as their words, spread across the tile, so every label
     stays on one line (the operator 21.10: "Max drawdown" wrapped). */
  .pf-kpis {
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    gap: 0 8px;
    max-width: none;
    margin-top: 12px;
    padding: 10px 12px;
    border-top: 0;
    border-radius: var(--r-tile);
    background: var(--tile);
  }

  .pf-kpis b {
    font-size: 14px;
  }

  .pf-kpis span {
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .pf-chart {
    min-height: 176px;
    margin-top: 6px;
  }

  .pf-leg {
    gap: 8px;
    bottom: -6px;
  }

  .pf-leg__s {
    display: none;
  }
}

/* A phone: the card is the top bar and the desk, edge to edge (--frame 0). */
@media (max-width: 560px) {
  .pf-desk {
    padding: 4px 16px 14px;
  }
}

/* =====================================================================
 * 1b. The four windows under the desk (new look, 2026-10-17; the structure
 *     and proportions of mockup v13's windows, our colours): one even row -
 *     Accounts, Daily limits, Sessions, Recent trades - equal heights, the
 *     content pinned to the top and a footer or the last row pinned to the
 *     bottom. They are recessed windows set back by the page gutter.
 * ================================================================== */

.pf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch; /* one row: every window is as tall as the tallest, from content */
  gap: 14px;
}

.pf-card {
  padding: 22px 24px;
}

.pf-card [data-pf-w-body] {
  display: contents;
}

/* The foot of a window (the add row, the link, the one-line note, today's
   limit) sits at the bottom edge, so the four windows end on one line. */
.pf-card [data-pf-w-body] > .pf-foot,
.pf-card [data-pf-w-body] > .pf-fl,
.pf-card [data-pf-w-body] > .pf-ins,
.pf-card [data-pf-w-body] > .pf-tl {
  margin-top: auto;
}

.pf-card__h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}

.pf-card__h b {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-1);
}

.pf-card__h em {
  font-style: normal;
  font-size: 12.5px;
  color: var(--text-3);
  white-space: nowrap;
}

.pf-card .g { color: var(--gain); }
.pf-card .l { color: var(--loss); }
.pf-card .n { color: var(--text-2); }

.pf-card__empty {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}

/* A journal with no closed trade: the desk says so once, the windows that would repeat it are not drawn. */
.pf-card:has(> [data-pf-w-body]:empty) {
  display: none;
}

/* The footer link; in a window it is pinned to the bottom (.pf-card [data-pf-w-body] > .pf-fl). */
.pf-fl {
  margin-top: 0;
  padding: 14px 0 0;
  align-self: flex-start;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lead);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.pf-fl:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 3px;
  border-radius: 8px;
}

.pf-fl:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Accounts ---- */
.pf-acc,
.pf-arow,
.pf-add {
  display: flex;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.pf-acc {
  flex-direction: column;
  gap: 0;
}

.pf-acc:focus-visible,
.pf-arow:focus-visible,
.pf-add:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 3px;
  border-radius: 8px;
}

.pf-acc__id {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pf-acc__sw {
  flex: none;
  width: 4px;
  height: 36px;
  border-radius: 2px;
  background: var(--acct, var(--lead));
}

.pf-acc b,
.pf-arow b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}

.pf-acc__id span span,
.pf-arow__id span,
.pf-bals {
  display: block;
  font-size: 13px;
  color: var(--text-2);
}

.pf-bal {
  margin-top: 16px;
  font-family: var(--font-family-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-1);
}

.pf-bals {
  margin-top: 4px;
}

.pf-alist {
  display: flex;
  flex-direction: column;
}

.pf-arow {
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.pf-arow + .pf-arow {
  border-top: 1px solid var(--line);
}

.pf-arow:first-child {
  padding-top: 0;
}

.pf-arow__id {
  flex: 1;
  min-width: 0;
}

.pf-arow__bal {
  white-space: nowrap;
}

/* The window's foot: the add row and, past five accounts, the link to all of them. */
.pf-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
}

.pf-foot .pf-fl {
  margin-top: 0;
}

/* A plain row with a round plus, not a box. */
.pf-add {
  align-items: center;
  gap: 12px;
  margin-top: 0;
  padding-top: 14px;
}

.pf-add__pl {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--win-tile);
  color: var(--text-1);
}

.pf-add__pl svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pf-add b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-1);
}

.pf-add span span {
  display: block;
  font-size: 13px;
  color: var(--text-2);
}

/* ---- Daily limits ---- */
.pf-lk {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pf-lk b {
  font-family: var(--font-family-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-1);
}

.pf-lk span {
  font-size: 13px;
  color: var(--text-2);
}

.pf-days2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18px, 1fr));
  gap: 4px;
  margin-top: 16px;
}

.pf-days2 > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.pf-days2 i {
  display: block;
  width: 100%;
  height: 16px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--gain) 22%, var(--window));
}

.pf-days2 i.is-breach {
  background: color-mix(in srgb, var(--loss) 55%, var(--window));
}

.pf-days2 i.is-na {
  background: var(--track);
}

.pf-days2 span {
  font-size: 12px;
  color: var(--text-2);
}

/* Today is a ring around its square, over the fill: a broken-limit day that is
   today still shows the breach. */
.pf-days2 .is-today i {
  box-shadow: 0 0 0 1.5px var(--lead);
}

.pf-days2 .is-today span {
  color: var(--text-1);
  font-weight: 600;
}

.pf-tl {
  margin-top: 0;
  padding-top: 16px;
}

.pf-tl__h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
}

.pf-tl__h b {
  font-weight: 600;
  color: var(--text-1);
}

.pf-tl__t {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.pf-tl__t i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lead);
}

.pf-tbar {
  position: relative;
  height: 6px;
  margin-top: 9px;
  border-radius: 3px;
  background: var(--track);
}

.pf-tbar i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
  background: var(--text-2);
}

.pf-tbar i.is-warn { background: var(--warn); }
.pf-tbar i.is-loss { background: var(--loss); }

.pf-tbar u {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 1px;
  background: var(--text-3);
}

/* ---- Sessions ---- */
.pf-ss {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.pf-sr {
  display: grid;
  grid-template-columns: minmax(0, 92px) minmax(0, 1fr) 56px;
  align-items: center;
  gap: 10px;
}

.pf-sr b {
  display: block;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-sr span {
  display: block;
  font-size: 13px;
  color: var(--text-2);
}

.pf-sbar {
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--track);
}

.pf-sbar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: color-mix(in srgb, var(--gain) 70%, var(--window));
}

.pf-sbar i.is-loss {
  background: color-mix(in srgb, var(--loss) 70%, var(--window));
}

.pf-sv {
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.pf-ins {
  margin: 0;
  padding-top: 14px;
  font-size: 13px;
  color: var(--text-2);
}

/* ---- Recent trades ---- */
.pf-tr2 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
}

.pf-tr2:first-of-type {
  padding-top: 0;
}

.pf-tr2 + .pf-tr2 {
  border-top: 1px solid var(--line);
}

.pf-tr2:focus-visible {
  outline: 2px solid var(--lead);
  outline-offset: 2px;
  border-radius: 8px;
}

.pf-side {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--win-tile);
  color: var(--text-2);
}

.pf-side svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pf-tx {
  flex: 1;
  min-width: 0;
}

.pf-tx b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}

.pf-tx span {
  display: block;
  overflow: hidden;
  font-size: 13px;
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-r {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .pf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .pf-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
}

/* A phone: the four windows a size down - title 14, rows 13.5/12, the
   balance 22 - so a window holds its rows in about two thirds of the height
   (the operator 21.10). Touch targets keep 44px. */
@media (max-width: 560px) {
  .pf-grid {
    gap: var(--space-3);
  }

  .pf-card {
    padding: 14px 16px;
  }

  .pf-card__h {
    margin-bottom: 8px;
  }

  .pf-card__h b {
    font-size: 14px;
  }

  .pf-card__h em {
    font-size: 12px;
  }

  .pf-acc b,
  .pf-arow b,
  .pf-sr b,
  .pf-tx b,
  .pf-add b {
    font-size: 13.5px;
  }

  .pf-bals,
  .pf-sr span,
  .pf-tx span,
  .pf-add span span {
    font-size: 12px;
  }

  .pf-bal {
    margin-top: 10px;
    font-size: 22px;
  }

  .pf-lk b {
    font-size: 28px;
  }

  .pf-ss {
    gap: 9px;
  }

  .pf-tr2 {
    min-height: 44px;
    padding: 4px 0;
  }

  .pf-tl {
    padding-top: 10px;
  }

  .pf-fl {
    min-height: 44px;
    padding: 10px 0 0;
    font-size: 13px;
  }

  .pf-below {
    gap: var(--space-3);
  }

  .pf-wins {
    gap: var(--space-3);
  }
}

/* =====================================================================
 * 2. Under the windows: the Accounts | Risk control and the windows it
 *    shows - recessed, hairlines and thin bars.
 * ================================================================== */

.pf-below {
  container: pfwins / inline-size;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Motion on this page is short: a view's bars and switches settle in a
   fraction of a second (the page entry and a theme change must not drag).
   prefers-reduced-motion stays at css/reset.css: no transitions at all. */
.view-container--fleet .meter__fill,
.pf-wins .pill-toggle__opt {
  transition-duration: 160ms;
}

/* The Accounts | Risk control: the desk's segmented capsule, one size up. */
.pf-seg--below {
  align-self: flex-start;
}

.pf-seg--below button {
  min-width: 0;
  padding: 7px 20px;
  font-size: 13px;
}

.pf-wins {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.pf-win {
  gap: 0;
  padding: 20px 22px 22px;
  border-radius: var(--r-window);
}

.pf-win[hidden] {
  display: none;
}

.pf-win .g { color: var(--gain); }
.pf-win .l { color: var(--loss); }

.pf-win--span3 { grid-column: span 3; }
.pf-win--span4 { grid-column: 1 / -1; }

@container pfwins (max-width: 1000px) {
  .pf-wins {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pf-win--span3 {
    grid-column: 1 / -1;
  }
}

@container pfwins (max-width: 620px) {
  .pf-wins {
    grid-template-columns: minmax(0, 1fr);
  }

  .pf-win,
  .pf-win--span3,
  .pf-win--span4 {
    grid-column: auto;
    padding: 14px 16px;
  }
}

/* The controls inside the windows use the one segmented look (form.css). */

.pf-win--fleet .fleet-section__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}

/* A window's head: the name, and what it covers. */
.pf-wt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.pf-wt b {
  font-size: 15px;
  font-weight: 600;
}

.pf-wt em {
  font-style: normal;
  font-size: 13px;
  color: var(--text-2);
}

.pf-win__sub {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-caption);
  color: var(--text-2);
}

/* ---- Daily loss limits: the rings ---- */
.pf-lim {
  display: flex;
  flex-direction: column;
  height: 236px;
}

.pf-lim__svg {
  flex: 1;
  min-height: 0;
  width: 100%;
}

.pf-lim__leg {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-top: 4px;
  font-size: 12px;
}

.pf-lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pf-lg:last-child:not(:first-child) {
  flex-direction: row-reverse;
}

/* ---- Per day (Risk) ---- */
.pf-win--days .pf-mini-row {
  justify-content: flex-start;
  flex-wrap: wrap;
  row-gap: var(--space-3);
}

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

.pf-win--days .pf-days {
  margin-top: var(--space-4);
}

/* ---- The Accounts view ---- */
.pf-win--fleet.fleet-section {
  gap: 0;
}

.pf-win--fleet .fleet-section__head {
  align-items: center;
  margin-bottom: 12px;
}

.pf-money-slot:empty {
  display: none;
}

.pf-money {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  padding: 4px 0 16px;
}

.pf-money__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pf-money__value {
  font-size: 22px;
  font-weight: var(--fw-value);
  letter-spacing: -0.02em;
}

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

.pf-note {
  max-width: 60ch;
  margin: 0 0 var(--space-3);
}

.pf-table {
  min-width: 0;
}

.pf-perf__head {
  align-items: center;
}

.pf-perf__modes {
  min-width: 0;
  max-width: 100%;
  display: flex;
}

.pf-perf__modes .pill-toggle {
  max-width: 100%;
}

/* The canvas takes the height it is given; the chart sizes it from its parent. */
.pf-perf__canvas.chart-card__canvas-wrap {
  height: 280px;
  margin-top: var(--space-3);
}

.pf-win--perf .chart-legend {
  margin-top: var(--space-3);
}

@media (max-width: 560px) {
  .pf-mini-row {
    width: 100%;
    justify-content: space-between;
  }

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

/* Attention: rows with a coloured rail, no icon tiles. */
.pf-win .attn-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-bottom: 12px;
}

/* The :root[data-look] twin (and its :hover) beats the Tapebook look's
   window shadow on .attn-card (look-tapebook.css, rest and hover), so the
   coloured rail is what shows; critical and warning differ by that rail. */
.view-container--fleet .pf-win .attn-card,
:root[data-look] .view-container--fleet .pf-win .attn-card,
:root[data-look] .view-container--fleet .pf-win .attn-card:hover {
  padding: 14px 0 14px 14px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: inset 3px 0 0 var(--attn-rail, var(--line));
}

:root[data-look] .view-container--fleet .pf-win .attn-card:hover {
  border-top-color: var(--color-border-strong);
}

.pf-win .attn-card--critical { --attn-rail: var(--loss); }
.pf-win .attn-card--warning { --attn-rail: var(--warn); }

.pf-win .attn-card__icon {
  width: auto;
  height: auto;
  background: none;
  border: 0;
}

/* 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: var(--fw-value);
  letter-spacing: var(--ls-value);
}

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

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

.attn-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--space-4);
}

.pf-attn:empty {
  display: none;
}

.pf-attn-label {
  margin: 0 0 var(--space-3);
}

/* 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: var(--fw-figure);
  letter-spacing: var(--ls-figure);
  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(--text-3);
}

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

/* =====================================================================
 * 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: 12px;
}

.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: 42px minmax(48px, 1fr) 40px;
  align-items: center;
  gap: var(--space-2);
}

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

.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 {
  color: var(--text-3);
}

.chart-legend__item.is-off .chart-legend__name {
  color: var(--text-3);
}

.chart-legend__item.is-off .chart-legend__swatch {
  opacity: 0.45;
  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).
 * ================================================================== */

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

/* 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;
}

/* =====================================================================
 * 5. Under the desk (R4, decisions 4 and 9): tabs that filter the windows,