/* =====================================================================
   Hedge Fund Simulation, participant app: the desk, the positions, the
   charts and every other rule only index.html reaches. The file keeps its
   portfolio-sim name, and the app keeps its `pm-` prefix, because the sim
   was renamed on 2026-08-26 and the internal identifiers deliberately did
   not move with it (see backend/games/portfolio/__init__.py).

   index.html loads participant-primitives.css and participant-shell.css
   before this file. The shell sheet has the rules the Capital Markets and
   Prime Brokerage pages share with this app: the workspace, the sidebar,
   the frames, the tables, the feed, the Briefing document and the enlarged
   card. The desk vocabulary here is modelled on the platform's
   market-making.css and prefixed `pm-` so nothing collides with the copied
   component styles.

   Layout contract, copied from the market-making desk: while a session is
   live the Trading Desk fills ONE viewport with no page scrolling. Only
   the feeds and blotters scroll, inside their own boxes. The
   `pm-desk-active` class on the workspace switches the platform's
   scrolling content area into a fixed fill-the-height layout; every other
   page removes it and normal scrolling returns.
   ===================================================================== */

/* ── One-viewport mode (Trading Desk) ──────────────────────────────── */

/* The desk page's content host is the flex column the .pm-desk inside it
   stretches into. Without this the desk grid collapses to zero height and
   the overflow:hidden left column clips away entirely. */
#pm-workspace.pm-desk-active #pm-desk-content {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#pm-workspace .pm-desk {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Sidebar ───────────────────────────────────────────────────────── */

/* A value that reads as words: the session state, the pace, the day count.
   Same weight and colour as a figure, the body font instead of mono. */
#pm-params-content .pm-sb-row .pm-sb-word {
  font-weight: 600;
  color: var(--text);
  text-align: right;
}
#pm-params-content .pm-sb-row .pm-sb-word.negative { color: var(--negative); }
/* The sub-line sits inside the value's span, so it would inherit the mono
   face. It reads as a sentence ("30% of capacity", "limit 20%"), and mono
   is for figures alone, so it takes the body font back. */
#pm-params-content .pm-sb-sub {
  display: block;
  text-align: right;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}
/* The countdown changes width as it passes ten seconds, and every reading
   on this line is placed off the one beside it. Reserving the widest
   reading's width is what stops the line twitching once a second. */
#pm-params-content #pm-next-day {
  display: inline-block;
  min-width: 4ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* A standings column heading that carries the formula button beside it.
   The button is part of the heading rather than a second cell, so the
   column stays one column and the label keeps its right alignment. */
#pm-workspace .pm-score-head {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* The row the ones above it add up to. The rule over it is what says so,
   the way a total is ruled off on a statement.

   The rule is drawn brighter than --border, which at #252830 on the dark
   sidebar surface is a separator between rows and disappears when it has
   to carry meaning. The light theme takes the token back: #dde1ec on white
   reads at a glance already. */
#pm-params-content .pm-sb-row--sum {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  margin-top: 2px;
  padding-top: 6px;
}
[data-theme="light"] #pm-params-content .pm-sb-row--sum {
  border-top-color: var(--border);
}

/* ── Trading Desk ──────────────────────────────────────────────────── */

#pm-workspace .pm-grid {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  /* The market grid is down to six columns, so the left side needs less
     than it did and the right side, which carries four cards of figures,
     needs more than it had. */
  grid-template-columns: minmax(600px, 44%) 1fr;
  /* The panels tile edge to edge with the page ground showing through the
     1px gaps as the seam between them (owner decision 2026-08-20, the
     terminal chrome pass). The ground is painted here explicitly because
     the desk's surround took the surface tone (see .workspace-content),
     so the gaps no longer sit over it. The columns below carry the same
     gap and ground, so every seam on the desk is the same hairline. */
  gap: 1px;
  background: var(--bg);
}
/* Left: the market grid takes what is left after the ticket, and scrolls
   inside itself, so the ticket never moves down the screen. */
#pm-workspace .pm-col-market {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--bg);
  overflow: hidden;
}
#pm-workspace .pm-market-frame { flex: 1 1 0; }
#pm-workspace .pm-ticket-frame { flex: 0 0 auto; }
/* Right: the instrument panel, the newsfeed, positions, resting orders.
   The newsfeed sits under the panel, where the story that moves a name
   reads beside the name it moves. The blotter is not here: a fill confirms
   itself the moment the position moves, so the list of them is a record
   rather than something a desk trades from, and it reads on Portfolio
   Analytics.

   Height has one owner per card, and the grid distributes only what is
   genuinely elastic. Tuned fractions were tried for each card in turn and
   kept coming apart, because two things were sizing the same card at once:
   the card asking for its content's height and the grid handing it a share
   of the column regardless. So each card is sized by what it is.

   Fixed: the instrument panel shows one set of fields and one chart, so it
   is a known height and says so itself. That is also what stops it
   resizing when an instrument is picked.

   Content: resting orders is usually empty and never long, so it takes the
   height of what it holds, capped so a full book of orders scrolls rather
   than eating the column.

   Elastic: the newsfeed and positions are lists with no natural end, so
   they take equal shares of whatever the other two leave, down to nothing
   on a short screen. That is what keeps the column ending exactly where
   the ticket beside it does instead of running off the bottom. Any card
   too small to read on the day is opened with its own button. */
#pm-workspace .pm-col-right {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 1px;
  background: var(--bg);
}

/* ── Market grid ───────────────────────────────────────────────────── */

#pm-workspace .pm-market-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;          /* the grid is one of the regions that scroll */
  overflow-x: auto;          /* a narrow window scrolls rather than clips */
}
/* Market grid: symbol, beta, bid, ask, daily %, position. Every column is
   given a share, none left to take what is over: under `table-layout:
   fixed` an unsized column gets only the remainder, and that is how the
   company name came to be squeezed to two letters.

   Sector and the company name are not here. Neither prices the instrument,
   the panel beside the grid carries both, and the room they took was
   coming out of the six columns a desk reads on every glance. Beta stays:
   the mandate caps beta-adjusted net exposure, so it is read while
   scanning rather than looked up. */
#pm-workspace .pm-market th:nth-child(1) { width: 13%; }
#pm-workspace .pm-market th:nth-child(2) { width: 13%; }
#pm-workspace .pm-market th:nth-child(3),
#pm-workspace .pm-market th:nth-child(4) { width: 18.5%; }
#pm-workspace .pm-market th:nth-child(5) { width: 18.5%; }
#pm-workspace .pm-market th:nth-child(6) { width: 18.5%; }
/* A universe whose tickers are not the company leads on the name and drops
   the ticker (name, beta, bid, ask, daily %, position). Every column is
   redeclared rather than adjusted, because under `table-layout: fixed` an
   unsized column takes only the remainder. The name is the one column that
   may run out of room, and it takes the ellipsis the table already sets. */
#pm-workspace .pm-market--named th:nth-child(1) { width: 27%; }
#pm-workspace .pm-market--named th:nth-child(2) { width: 9%; }
#pm-workspace .pm-market--named th:nth-child(3),
#pm-workspace .pm-market--named th:nth-child(4) { width: 17%; }
#pm-workspace .pm-market--named th:nth-child(5) { width: 14%; }
#pm-workspace .pm-market--named th:nth-child(6) { width: 16%; }
/* The macro grid runs five columns: a universe without a market factor
   declares no beta. Redeclared in full, as above, because under fixed
   layout the five columns would otherwise take the first five of the six
   widths and the bid would sit in the beta column's 9%. */
#pm-workspace .pm-market--nobeta th:nth-child(1) { width: 30%; }
#pm-workspace .pm-market--nobeta th:nth-child(2),
#pm-workspace .pm-market--nobeta th:nth-child(3) { width: 18%; }
#pm-workspace .pm-market--nobeta th:nth-child(4) { width: 16%; }
#pm-workspace .pm-market--nobeta th:nth-child(5) { width: 18%; }
/* The macro grid with the yield beside the bond futures' price (name,
   bid, ask, yield, daily %, position), redeclared in full for the same
   reason. The yield is two decimals of a single-digit percentage, so it
   is the narrowest column. */
#pm-workspace .pm-market--nobeta.pm-market--yield th:nth-child(1) { width: 27%; }
#pm-workspace .pm-market--nobeta.pm-market--yield th:nth-child(2),
#pm-workspace .pm-market--nobeta.pm-market--yield th:nth-child(3) { width: 16%; }
#pm-workspace .pm-market--nobeta.pm-market--yield th:nth-child(4) { width: 11%; }
#pm-workspace .pm-market--nobeta.pm-market--yield th:nth-child(5) { width: 14%; }
#pm-workspace .pm-market--nobeta.pm-market--yield th:nth-child(6) { width: 16%; }
/* The name leads the grid where it is shown, so it reads as the identity
   column the ticker is on the other universes rather than as a gloss. */
#pm-workspace .pm-market .pm-name { font-weight: 500; }
/* The region heading between blocks of the grid. It is a row rather than a
   separate table so the columns stay in one fixed layout, and it sticks
   under the header the way the header sticks to the top, so the block a
   participant is scrolled into keeps saying which market it is. Weight and
   colour separate it from the rows, not a size of its own. */
/* The offset is the header row's rendered height less one pixel of
   overlap. The header's vertical padding changed in the density pass
   (2026-08-20), so it moved from 27px with it; re-measure in the browser
   if the header's type or padding changes again. */
#pm-workspace .pm-market .pm-market-block td {
  position: sticky;
  top: 23px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-weight: 600;
  padding-top: 7px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
#pm-workspace .pm-market .pm-market-block:hover td { background: var(--bg-elevated); }
/* Both tables in the right column declare every column, so neither takes
   the pixel width above. */
#pm-workspace .pm-orders-table th:first-child,
#pm-workspace #pm-positions .pm-table th:first-child { width: auto; }
/* Positions: symbol, quantity, average cost, value, unrealised, close.
   Declared one by one for the same reason the market grid is. Left to share what
   was over, the columns came out uneven and cut the figures to -94... and
   -$8..., which is worse than no column at all. Realised profit and loss
   is a review figure and reads on Portfolio Analytics instead. */
/* Resting orders: side, qty, instrument, type, price, TIF, cancel.
   Without a heading row this table had no sized columns at all, so
   `table-layout: fixed` split it into seven equal parts and cut the price
   to "Limit 22...". The instrument column holds the width the short TIF
   and Qty headings and the cancel cross gave back: at 11% it cut the
   credit tickers to US... (owner, 2026-08-21). */
#pm-workspace .pm-orders-table th:nth-child(1) { width: 10%; }
#pm-workspace .pm-orders-table th:nth-child(2) { width: 13%; }
#pm-workspace .pm-orders-table th:nth-child(3) { width: 28%; }
#pm-workspace .pm-orders-table th:nth-child(4) { width: 10%; }
#pm-workspace .pm-orders-table th:nth-child(5) { width: 18%; }
#pm-workspace .pm-orders-table th:nth-child(6) { width: 11%; }
#pm-workspace .pm-orders-table th:nth-child(7) { width: 10%; }

/* Six columns in the width five had, so the gutters pay rather than the
   figures: the blotter's cells are cut to 4px a side, against the 7px the
   resting orders beside it keep. On the narrowest desk that is 36px given
   back to the columns, which is most of what the close column costs. */
#pm-workspace #pm-positions .pm-table th,
#pm-workspace #pm-positions .pm-table td {
  padding-left: 4px;
  padding-right: 4px;
}
/* The columns are named rather than counted, because the tick and DV01
   columns are in the markup at every width and shown only where the card
   is wide enough (the container query further down): an nth-child count
   would shift under the hidden cells. */
#pm-workspace #pm-positions .pm-table th.pm-pc-sym { width: 20%; }
#pm-workspace #pm-positions .pm-table th.pm-pc-qty { width: 17%; }
#pm-workspace #pm-positions .pm-table th.pm-pc-avg { width: 17%; }
#pm-workspace #pm-positions .pm-table th.pm-pc-val { width: 18%; }
#pm-workspace #pm-positions .pm-table th.pm-pc-unr { width: 18%; }
/* The close column carries a cross, so it asks for a tenth of the card
   rather than the seventh the word would have. */
#pm-workspace #pm-positions .pm-table th.pm-pc-x { width: 10%; }
/* Re-arranging the positions by hand: the dragged row dims, and the mark
   is drawn on the edge of the row the drop would land against. */
#pm-workspace #pm-positions tr.pm-row-dragging { opacity: 0.45; }
#pm-workspace #pm-positions tr.pm-drop-above td {
  border-top: 2px solid var(--color-accent);
}
#pm-workspace #pm-positions tr.pm-drop-below td {
  border-bottom: 2px solid var(--color-accent);
}
/* The blotter and the resting orders sit in the narrow right column and
   carry money figures, which need the room more than the gutters do. */
#pm-workspace .pm-col-right .pm-table th,
#pm-workspace .pm-col-right .pm-table td { padding-left: 7px; padding-right: 7px; }
/* A heading there is allowed a second line. Cut to fit, they were reading
   as AVE, UNR and REA, and a column nobody can name is a column nobody can
   use. The figures underneath still stay on one line. */
#pm-workspace .pm-col-right .pm-table th {
  white-space: normal;
  vertical-align: bottom;
  line-height: 1.15;
}
#pm-workspace .pm-market tbody tr { cursor: pointer; }
/* A region heading is not an instrument, so it is not clickable. */
#pm-workspace .pm-market tbody tr.pm-market-block { cursor: default; }
/* A halted name after a credit default: the row stays so the reader sees
   what happened, muted, with the quote cells replaced by the word. */
#pm-workspace .pm-market tbody tr.pm-row-halted td {
  color: var(--text-muted);
}
/* The instrument panel's halt line under the name tags. Inherits the
   tags' type scale; colour alone carries the state. */
#pm-workspace .pm-ip-halted {
  color: var(--negative);
  margin-top: 2px;
}
#pm-workspace #pm-positions .pm-table tbody tr { cursor: pointer; }
#pm-workspace .pm-market tbody tr:hover,
#pm-workspace #pm-positions .pm-table tbody tr:hover {
  background: var(--bg-elevated);
}
/* The instrument the desk is working on, held until another is picked. The
   tint has to read as chosen rather than as hovered, so it is the accent at
   low strength rather than another step of grey. Older engines that cannot
   mix colours fall back to the hover tint. */
#pm-workspace .pm-market tbody tr.pm-row-selected,
#pm-workspace #pm-positions .pm-table tbody tr.pm-row-selected {
  background: var(--bg-elevated);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
}
/* A futures contract is worth multiplier times the index price, so its size
   sits next to the symbol. Without it a contract reads like a share. */
#pm-workspace .pm-mult {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ── Ticket ────────────────────────────────────────────────────────── */

#pm-workspace .pm-ticket { padding: 0 10px 10px; }
/* Four tracks, not equal: the first two (Instrument and Order type, Size
   and Limit price) hold short entries and give what they save to the
   third, which must show "% of capital" whole, and the fourth, where
   four position buttons and the Sell and Buy pair need the room. The
   desk only renders at 1024px and up, so the fixed tracks never squeeze
   below their minimums. */
#pm-workspace .pm-ticket-form {
  display: grid;
  grid-template-columns:
      minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(118px, 1fr) minmax(160px, 1.6fr);
  gap: 8px;
  align-items: end;
}
/* The four position buttons share one column of the form beside the size
   fields. They carry no label of their own, and the form aligns its row
   on the baseline of the inputs, so they line up with the select next to
   them. The padding is cut to almost nothing, which is what lets four of
   them stand in the width of one field; the percentages are figures, so
   they take the mono face like every other column of numbers. */
#pm-workspace .pm-ticket-close {
  display: flex;
  gap: 4px;
}
#pm-workspace .pm-ticket-close .btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 2px;
  font-size: 0.82rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* What the typed size works out to. It sits on its own row under the size
   fields rather than taking a grid column of its own, so the fields keep
   their widths as the note appears and disappears. */
#pm-workspace .pm-ticket-size {
  grid-column: 1 / -1;
  min-height: 1.1em;
  margin-top: -2px;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
#pm-workspace .pm-ticket-actions {
  display: flex;
  gap: 8px;
  /* Pinned to the wide track: on a market order the price and time in
     force fields are hidden, and auto-placement would otherwise put Sell
     and Buy in a narrow track instead. */
  grid-column: 4;
}
#pm-workspace .pm-ticket-actions .btn { flex: 1 1 0; }
/* The cross on a position row's close and a resting order's cancel: the
   ghost button cut down twice, to the height of a table row, and to a
   cross rather than the word. Gutters and a five-or-six-letter label were
   taking a third of these cards between them, and the credit symbols were
   the ones paying for it (CMCSA-CDS read as CMCS...). The label lives in
   the tooltip and in the accessible name instead. */
#pm-workspace #pm-positions .pm-close-btn,
#pm-workspace .pm-orders-table .pm-close-btn {
  padding: 0 6px;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* The instrument field's match list. It hangs off the body, not off the
   ticket, because .pm-frame clips its own overflow and a list drawn inside
   the ticket would be cut at the frame's edge; so the selector carries no
   #pm-workspace scope and the position is written by the script from the
   field's rectangle, the way the shared tooltip places itself. */
.pm-symbol-search {
  position: fixed;
  z-index: var(--z-dropdown);
  max-width: 340px;
  max-height: 260px;
  overflow-y: auto;
  padding: 2px 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.pm-symbol-search[hidden] { display: none; }
.pm-search-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}
/* The ticker is what the row is looked up by and the name confirms it, the
   two tiers the market grid already reads in. */
.pm-search-sym {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--text);
}
.pm-search-name {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
}
/* One highlight for both routes into a row: the arrow keys mark the row
   they are on, and the pointer marks the row it is over. */
.pm-search-row:hover,
.pm-search-row--active {
  background: var(--bg-surface);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
}

/* A refused order stays here until the next ticket action. */
#pm-workspace .pm-ticket-message {
  margin-top: 8px;
  padding: 8px 10px;
  font-size: 0.85rem;
  color: var(--negative);
  background: var(--negative-bg);
  border: 1px solid color-mix(in srgb, var(--negative) 35%, transparent);
}
/* The preview is two side blocks of seven rows, plus one line for a
   futures contract. Reserving that height keeps the ticket the same size
   whichever instrument is picked, so the grid above it never jumps. A
   curve pack's preview carries an eighth row (the DV01 or CS01 amount)
   and the face-notional line on every row, so its reserve is one row
   taller; without it the ticket grew by the overrun when an instrument
   was picked. */
#pm-workspace .pm-preview {
  margin-top: 8px;
  min-height: 208px;
}
#pm-workspace .pm-preview--curve { min-height: 232px; }
/* The preview's fold (owner decision 2026-08-21): closed by default, so
   the ticket ends at its buttons and the market grid above keeps the
   height the preview was reserving. The reserve still applies open, so
   the ticket does not change height between instruments. */
#pm-workspace .pm-ticket-fold { margin-top: 6px; }
#pm-workspace .pm-ticket-fold:not([open]) { margin-bottom: 2px; }

/* ── The desk's width-aware panels ──────────────────────────────────
   The ticket and the positions card each measure their own panel, not
   the window, so they respond to the seams above being dragged. */
#pm-workspace .pm-ticket-frame { container: pm-ticket / inline-size; }
#pm-workspace .pm-positions-frame { container: pm-positions / inline-size; }

/* A narrow ticket: the fields keep a two-across grid and the button
   groups take whole rows beneath them, rather than eight controls
   fighting for four squeezed tracks. */
@container pm-ticket (max-width: 519px) {
  #pm-workspace .pm-ticket-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #pm-workspace .pm-field--mode,
  #pm-workspace #pm-t-tif-field,
  #pm-workspace .pm-ticket-close,
  #pm-workspace .pm-ticket-actions { grid-column: 1 / -1; }
}

/* A wide positions card earns two more columns: the tick that feeds the
   selected total, and the DV01 on the universes that have one. Narrow,
   both stay in the markup and out of the layout, so the ticked set and
   the figures survive the card being narrowed. */
#pm-workspace .pm-pos-tick,
#pm-workspace .pm-pos-dv01 { display: none; }
@container pm-positions (min-width: 620px) {
  #pm-workspace #pm-positions .pm-pos-tick { display: table-cell; }
  #pm-workspace #pm-positions .pm-table--dv01 .pm-pos-dv01 {
    display: table-cell;
  }
  #pm-workspace #pm-positions .pm-table th.pm-pos-tick { width: 24px; }
  #pm-workspace #pm-positions .pm-table th.pm-pc-x { width: 8%; }
  #pm-workspace #pm-positions .pm-table--dv01 th.pm-pc-sym { width: 15%; }
  #pm-workspace #pm-positions .pm-table--dv01 th.pm-pc-qty { width: 13%; }
  #pm-workspace #pm-positions .pm-table--dv01 th.pm-pc-avg { width: 13%; }
  #pm-workspace #pm-positions .pm-table--dv01 th.pm-pc-val { width: 14%; }
  #pm-workspace #pm-positions .pm-table--dv01 th.pm-pc-unr { width: 14%; }
  #pm-workspace #pm-positions .pm-table--dv01 th.pm-pos-dv01 { width: 15%; }
}
#pm-workspace .pm-pos-tick input {
  accent-color: var(--color-accent);
  margin: 0;
  vertical-align: middle;
}

/* What the ticked positions come to. Under the scroller rather than in
   it, so a long book scrolls beneath the total. */
#pm-workspace .pm-pos-agg {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-subtle);
}
#pm-workspace .pm-pos-agg .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
#pm-workspace .pm-pos-agg[hidden] { display: none; }

/* ── Resizable seams ────────────────────────────────────────────────
   Invisible 9px handles laid over the desk's 1px gaps (desk_resize.js
   places them), so the tiled look is untouched until a seam is hovered.
   The tint on hover is the affordance; the drag replaces the columns'
   own sizing rules with the reader's shares. */
#pm-workspace .pm-grid { position: relative; }
#pm-workspace .pm-seam { position: absolute; z-index: 5; }
#pm-workspace .pm-seam--v { width: 9px; cursor: col-resize; }
#pm-workspace .pm-seam--h { height: 9px; cursor: row-resize; }
#pm-workspace .pm-seam:hover,
#pm-workspace .pm-seam--active {
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
}
body.pm-desk-resizing { user-select: none; }

/* A dragged seam replaces the column's own sizing rules with the
   reader's shares, held in the custom properties desk_resize.js writes.
   Every panel already scrolls inside its own box, so a panel given less
   than its content scrolls rather than clips. */
#pm-workspace .pm-col-market.pm-rows-manual .pm-market-frame {
  flex: 0 0 var(--pm-l1);
}
#pm-workspace .pm-col-market.pm-rows-manual .pm-ticket-frame {
  flex: 1 1 0;
  min-height: 0;
}
#pm-workspace .pm-col-market.pm-rows-manual .pm-ticket {
  overflow-y: auto;
  min-height: 0;
}
#pm-workspace .pm-col-right.pm-rows-manual {
  grid-template-rows:
      minmax(56px, var(--pm-r1)) minmax(56px, var(--pm-r2))
      minmax(56px, var(--pm-r3)) minmax(56px, var(--pm-r4));
}
/* In its own rules the instrument panel says its height and the orders
   box caps its scroller; a reader-sized row owns both instead. */
#pm-workspace .pm-col-right.pm-rows-manual .pm-instrument {
  flex: 1 1 0;
  max-height: none;
  min-height: 0;
}
#pm-workspace .pm-col-right.pm-rows-manual .pm-orders-frame .pm-scroll {
  flex: 1 1 0;
  max-height: none;
}
#pm-workspace .pm-preview-unit {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}
#pm-workspace .pm-preview-sides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 28px;
}
/* No box around either side. The gap between the two columns and the
   heading over each one already separate them, and a drawn frame around
   a list of figures adds an edge for the eye to catch on without saying
   anything the layout has not said. */
#pm-workspace .pm-preview-side { padding: 2px 0; }
#pm-workspace .pm-preview-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
#pm-workspace .pm-preview-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 1px 0;
}
#pm-workspace .pm-preview-row .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
#pm-workspace .pm-preview-blocked {
  font-size: 0.8rem;
  color: var(--negative);
}

/* ── Blotter, resting orders, feed ─────────────────────────────────── */

/* The close and cancel crosses stack into one visual column across the
   two cards, so nothing may shift one table against the other: the
   cancel cell takes the blotter's 4px gutter instead of the orders
   table's 7px, and both scrollers reserve their scrollbar gutter so a
   list that scrolls is not narrower than one that does not. */
#pm-workspace .pm-orders-table td:last-child { padding-right: 4px; }
#pm-workspace .pm-positions-frame .pm-scroll,
#pm-workspace .pm-orders-frame .pm-scroll { scrollbar-gutter: stable; }
#pm-workspace .pm-order-side { font-weight: 600; }
#pm-workspace .pm-order-side--buy  { color: var(--positive); }
#pm-workspace .pm-order-side--sell { color: var(--negative); }
#pm-workspace .pm-feed-filter {
  width: auto;
  margin-top: 0;
  padding: 0 4px;
  font-size: 0.75rem;
}

/* ── Scrolling pages (everything except the Trading Desk) ──────────── */

#pm-workspace .pm-muted {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 8px 0;
}
/* The same bar in the sidebar, sitting under the row it belongs to rather
   than in a cell of its own. */
#pm-params-content .pm-sb-meter { margin: 0 0 6px; }
/* ── Instrument panel ──────────────────────────────────────────────── */

/* The detail for whatever the desk has selected. A fixed region rather
   than something that floats over the grid: it is bound to the row's
   identity, not to where that row happens to sit, so a print or a re-sort
   leaves it alone. Capped and scrolling, so a name with three headlines
   never pushes the positions table off the screen. */
/* The panel takes the height of what it holds rather than a share of the
   column, and never more than the ceiling below. A stated height left dead
   space under the limit bar, because how much a name has to show varies:
   a stock carries a limit bar a future does not, and headlines are one line
   or two. Shrinking to the content hands that space to the newsfeed, which
   is the card underneath and the one with no natural end. The ceiling keeps
   a name with two long headlines from eating the column, and the overflow
   is the safety valve for that case rather than the way it is read. */
#pm-workspace .pm-instrument {
  flex: 0 0 auto;
  height: auto;
  max-height: 250px;
  overflow-y: auto;
  padding: 6px 10px 8px;
}
/* Nothing picked yet: the card holds its full height, so the one line sits
   in the middle of it rather than in a strip, and the column does not
   resize the moment a first name is clicked. */
#pm-workspace .pm-instrument--empty {
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#pm-workspace .pm-ip-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
/* A ticker is a name, not a number, so it is set in the body font like
   every other piece of text. Weight carries it instead. */
#pm-workspace .pm-ip-symbol {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
#pm-workspace .pm-ip-name { color: var(--text-secondary); font-size: 0.9rem; }
#pm-workspace .pm-ip-tags {
  margin-top: 1px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
/* The region rides beside the sector on a multi-region universe, separated
   by weight rather than by another size or another colour. */
#pm-workspace .pm-ip-region::before { content: '\00b7'; margin: 0 5px; }
/* The price history, with both axes drawn. The room for it came from
   taking bid, ask, the day's move and the position back out of the panel:
   the market grid already prints all four on the row that was clicked. */
#pm-workspace .pm-ip-chart { margin: 6px 0 4px; }
#pm-workspace .pm-ip-chart-svg {
  width: 100%;
  height: auto;
  max-height: 112px;
  display: block;
  font-family: var(--font);
  font-size: 10px;
  /* Moving over the line reads the close under the pointer. */
  cursor: crosshair;
}
/* Axis figures take the mono face, the way every other column of numbers
   on the desk does. The date labels beside them are words and do not. */
#pm-workspace .pm-ip-chart-svg .pm-ip-tick {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* The crosshair readout is what the pointer is there to read, so it is
   larger than the axis ticks. Sizes here are viewBox units: the SVG draws
   at 640 wide and scales to the panel, so 16 renders near 10px. */
#pm-workspace .pm-ip-chart-svg .pm-ip-hover-text { font-size: 16px; }
/* A position's P&L path on hover (owner, 2026-10-07): a card beside the
   positions list, drawn with the instrument panel's chart and its row
   type. It takes no pointer events, so the row under the pointer keeps
   the hover. */
#pm-workspace .pm-pnl-pop {
  position: fixed;
  z-index: 40;
  width: 380px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  /* A neutral edge a step above the --border hairline, which the panels
     under the chart also show (owner, 2026-10-14). */
  border: 1px solid color-mix(in srgb, var(--text-muted) 45%, var(--bg-elevated));
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
#pm-workspace .pm-pnl-pop[hidden] { display: none; }
#pm-workspace .pm-pnl-pop-head,
#pm-workspace .pm-pnl-pop-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
#pm-workspace .pm-pnl-pop-head { margin-bottom: 6px; }
#pm-workspace .pm-pnl-pop-foot { margin-top: 6px; }
#pm-workspace .pm-pnl-pop .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
#pm-workspace .pm-pnl-pop .num.positive { color: var(--positive); }
#pm-workspace .pm-pnl-pop .num.negative { color: var(--negative); }
#pm-workspace .pm-ip-subhead {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 4px 0 2px;
}
#pm-workspace .pm-ip-limit { margin-top: 4px; }
#pm-workspace .pm-ip-news { margin-top: 4px; }

/* ── Charts ────────────────────────────────────────────────────────── */

/* The head keeps clear of the button rather than running under it. */
#pm-workspace .pm-positions-frame .pm-frame-head { padding-right: 40px; }

/* ── The redesigned pages: Economy and Charts (2026-10) ────────────────

   The Claude Design handoff design_handoff_economy_charts, owner-approved
   2026-10-11 with the design winning on the look: bordered panes on the
   page ground with 8px gaps, title bars and number cards. The type is
   the owner's later ruling of the same day, the --pm-fs-* sizes, and the
   rows and columns are set for it. These pages fill the viewport the way
   the Trading Desk does, their panes scroll inside themselves, and the
   sidebar folds as they open (app.js `foldSidebarFor`). */

#pm-workspace.pm-fill-active .workspace-content {
  overflow-y: hidden;
  background: var(--bg);
}
#pm-workspace.pm-fill-active .tab-panel.active {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#pm-workspace.pm-fill-active .tab-content-area {
  flex: 1 1 0;
  min-height: 0;
  max-width: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}
#pm-workspace.pm-fill-active #pm-economy-content,
#pm-workspace.pm-fill-active #pm-charts-content,
#pm-workspace.pm-fill-active #pm-performance-content,
#pm-workspace.pm-fill-active #pm-debrief-content {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Numerals tabular, lining and slashed-zero on these pages, so a
     column of figures reads down its digits. */
  font-feature-settings: 'tnum' 1, 'lnum' 1, 'zero' 1;
  font-size: var(--pm-fs-main);
  color: var(--text);
}
#pm-workspace .pm-pane-head {
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
#pm-workspace .pm-pane-label {
  font-size: var(--pm-fs-note);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
}
#pm-workspace .pm-pane-title {
  font-size: var(--pm-fs-main);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
}
#pm-workspace .pm-pane-note {
  min-width: 0;
  font-size: var(--pm-fs-note);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
#pm-workspace .pm-pane-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
#pm-workspace .pm-pane-expand {
  margin-left: auto;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: var(--pm-fs-main);
  line-height: 1;
  cursor: pointer;
}
#pm-workspace .pm-pane-tools + .pm-pane-expand,
#pm-workspace .pm-pane-tools .pm-pane-expand { margin-left: 0; }
#pm-workspace .pm-pane-expand:hover { color: var(--text); }
/* A small reading at the right of a title bar that opens something. */
#pm-workspace .pm-pane-aside {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font);
  font-size: var(--pm-fs-note);
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
}
#pm-workspace .pm-pane-aside .num { color: var(--text); }
#pm-workspace .pm-pane-aside:hover { color: var(--text); }
#pm-workspace .pm-pane-sublabel {
  font-size: var(--pm-fs-note);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* A chip that picks one of a few: a release's numbers, a region. */
#pm-workspace .pm-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: var(--pm-fs-main);
  white-space: nowrap;
  cursor: pointer;
}
#pm-workspace .pm-chip.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* The number cards: a caption, the figure and one line under it. */
#pm-workspace .pm-kpis {
  flex: none;
  display: grid;
  border-bottom: 1px solid var(--border);
}
#pm-workspace .pm-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#pm-workspace .pm-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#pm-workspace .pm-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 7px 10px;
  overflow: hidden;
  border-right: 1px solid var(--pm-subtle);
}
#pm-workspace .pm-kpi-label {
  font-size: var(--pm-fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
#pm-workspace .pm-kpi-value {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
#pm-workspace .pm-kpis--3 .pm-kpi-value { font-size: 16px; }
#pm-workspace .pm-kpi-sub {
  min-height: 15px;
  font-size: var(--pm-fs-label);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pm-workspace .pm-kpi.is-above .pm-kpi-value { color: var(--pm-above); }
#pm-workspace .pm-kpi.is-below .pm-kpi-value { color: var(--pm-below); }
#pm-workspace .pm-kpi.is-muted .pm-kpi-value { color: var(--text-muted); }
#pm-workspace .pm-kpi.is-today { background: var(--pm-today-bg); }
#pm-workspace .pm-kpi.is-today .pm-kpi-sub { color: var(--color-accent-text); }

/* ── Economy ─────────────────────────────────────────────────────────── */

#pm-workspace .pm-ec {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#pm-workspace .pm-subtabs {
  height: 50px;
  flex: none;
  display: flex;
  align-items: stretch;
  padding: 0 6px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
#pm-workspace .pm-subtab {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 0 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: var(--font);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
#pm-workspace .pm-subtab:hover { background: var(--pm-hover); }
#pm-workspace .pm-subtab.is-active {
  background: var(--bg-surface);
  border-bottom-color: var(--color-accent-text);
}
#pm-workspace .pm-subtab-label {
  font-size: var(--pm-fs-main);
  font-weight: 600;
  color: var(--text-muted);
}
#pm-workspace .pm-subtab.is-active .pm-subtab-label { color: var(--text); }
#pm-workspace .pm-subtab-sub { font-size: var(--pm-fs-note); color: var(--text-muted); }
#pm-workspace .pm-ec-main {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  gap: 8px;
  padding: 8px;
}

/* The calendar: one 28px line per event under sticky day headings. The
   grid's columns are set on the pane (--pm-cal-cols), because the thread
   column comes and goes with the tab. */
#pm-workspace .pm-ec-cal { flex: none; width: 500px; }
#pm-workspace .pm-ec-cal .pm-pane-head { padding: 0 8px; }
#pm-workspace .pm-ec-colhead,
#pm-workspace .pm-ec-row {
  display: grid;
  grid-template-columns: var(--pm-cal-cols);
  gap: 6px;
  align-items: center;
  padding: 0 8px;
}
#pm-workspace .pm-ec-colhead {
  height: 26px;
  flex: none;
  border-bottom: 1px solid var(--border);
  font-size: var(--pm-fs-note);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
#pm-workspace .pm-ec-cal-body {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  position: relative;
}
#pm-workspace .pm-ec-dayhead {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: var(--pm-fs-note);
  color: var(--text-secondary);
}
#pm-workspace .pm-ec-dayhead.is-today {
  background: var(--pm-today-bg);
  color: var(--color-accent-text);
}
#pm-workspace .pm-ec-dayrel { color: var(--text-muted); }
#pm-workspace .pm-ec-row {
  height: 28px;
  border-bottom: 1px solid var(--pm-subtle);
  cursor: pointer;
}
#pm-workspace .pm-ec-row:hover { background: var(--pm-hover); }
#pm-workspace .pm-ec-row.is-sel { background: var(--pm-sel); }
#pm-workspace .pm-ec-thread {
  font-size: var(--pm-fs-note);
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pm-workspace .pm-ec-name {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pm-workspace .pm-ec-row.is-past .pm-ec-name { color: var(--text-secondary); }
#pm-workspace .pm-ec-act,
#pm-workspace .pm-ec-row .pm-ec-cons,
#pm-workspace .pm-ec-prev {
  text-align: right;
  font-size: var(--pm-fs-main);
  white-space: nowrap;
  overflow: hidden;
}
#pm-workspace .pm-ec-act { font-weight: 600; color: var(--text); }
#pm-workspace .pm-ec-cons { color: var(--text-table); }
#pm-workspace .pm-ec-prev { color: var(--text-muted); }
#pm-workspace .pm-ec .is-above:not(.pm-kpi):not(.pm-ec-swatch) { color: var(--pm-above); }
#pm-workspace .pm-ec .is-below:not(.pm-kpi):not(.pm-ec-swatch) { color: var(--pm-below); }
#pm-workspace .pm-ec-cal-foot {
  height: 28px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  border-top: 1px solid var(--border);
  font-size: var(--pm-fs-note);
  color: var(--text-muted);
}
#pm-workspace .pm-ec-swatch.is-above { background: var(--pm-above); }
#pm-workspace .pm-ec-swatch.is-below { background: var(--pm-below); }
#pm-workspace .pm-ec-empty { padding: 10px; }
#pm-workspace .pm-ec-muted { color: var(--text-muted); }
#pm-workspace .pm-ec-sec { color: var(--text-secondary); }
#pm-workspace .pm-ec-table { color: var(--text-table); }
#pm-workspace .pm-ec-strong { font-weight: 500; }
#pm-workspace .pm-ec-ellipsis,
#pm-workspace .pm-ec-strong {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The release pane: the four cards, the chips of a release with several
   numbers, the legend, the prints and their surprises, and the history. */
#pm-workspace .pm-ec-rel { flex: 1 1 0; }
#pm-workspace .pm-ec-chips {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 10px 0;
}
#pm-workspace .pm-ec-line { width: 12px; border-top: 2px solid var(--pm-line); }
#pm-workspace .pm-ec-ring {
  width: 7px;
  height: 7px;
  border: 1.2px solid var(--pm-est);
  border-radius: 50%;
}
#pm-workspace .pm-ec-tick { height: 9px; border-left: 1px solid var(--color-accent-text); }
#pm-workspace .pm-ec-dash { height: 9px; border-left: 1px dashed var(--pm-spike); }
#pm-workspace .pm-ec-chart { flex: none; height: 196px; padding: 2px 6px 0; }
#pm-workspace .pm-ec-caption {
  flex: none;
  padding: 0 10px;
  font-size: var(--pm-fs-note);
  color: var(--text-muted);
}
#pm-workspace .pm-ec-bars { flex: none; height: 46px; padding: 0 6px; }
#pm-workspace .pm-ec-hist {
  flex: 1 1 0;
  min-height: 0;
  margin-top: 4px;
  overflow: auto;
  border-top: 1px solid var(--border);
}
#pm-workspace .pm-ec-hrow {
  display: grid;
  grid-template-columns: 80px repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-bottom: 1px solid var(--pm-subtle);
  font-size: var(--pm-fs-main);
}
#pm-workspace .pm-ec-hrow > span:first-child { color: var(--text-muted); }
#pm-workspace .pm-ec-hrow.is-sel { background: var(--pm-sel); }
#pm-workspace .pm-ec-hhead {
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  border-bottom-color: var(--border);
  font-size: var(--pm-fs-note);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The policy column: the rate, its chart and the yields, then the
   decisions, which take what is left and scroll. */
#pm-workspace .pm-ec-side {
  width: 360px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
#pm-workspace .pm-ec-policy { flex: none; }
#pm-workspace .pm-ec-rate {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 0;
}
#pm-workspace .pm-ec-rate-value {
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
}
#pm-workspace .pm-ec-priced { font-size: var(--pm-fs-label); color: var(--text-muted); }
#pm-workspace .pm-ec-priced .num { color: var(--text); }
#pm-workspace .pm-ec-pol-chart { height: 140px; padding: 4px 4px 0; }
#pm-workspace .pm-ec-yields-head {
  display: flex;
  align-items: center;
  padding: 5px 10px 3px;
  border-top: 1px solid var(--pm-subtle);
}
#pm-workspace .pm-ec-yields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 0 6px;
}
#pm-workspace .pm-ec-yield {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 10px;
}
#pm-workspace .pm-ec-yield > span:first-child { font-size: var(--pm-fs-note); color: var(--text-muted); }
#pm-workspace .pm-ec-yield .num { font-size: var(--pm-fs-main); }
#pm-workspace .pm-ec-decisions { flex: 1 1 0; }
#pm-workspace .pm-ec-dec-list { flex: 1 1 0; min-height: 0; overflow: auto; }
#pm-workspace .pm-ec-dec {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-height: 34px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--pm-subtle);
}
#pm-workspace .pm-ec-dec-line {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  font-size: var(--pm-fs-main);
  color: var(--text);
}
#pm-workspace .pm-ec-dec-line > span:nth-child(2) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pm-workspace .pm-ec-dec-line > :last-child { font-weight: 500; white-space: nowrap; }
#pm-workspace .pm-ec-dec.is-ahead .pm-ec-dec-line { color: var(--text-muted); }
#pm-workspace .pm-ec-vote {
  padding-left: 80px;
  font-size: var(--pm-fs-note);
  color: var(--text-muted);
}
#pm-workspace .pm-ec-vote .num { color: var(--text-secondary); }

/* A sector's middle pane: the issuers and their results (credit), or the
   companies' results (equity). */
#pm-workspace .pm-ec-iss { flex: 1 1 0; }
#pm-workspace .pm-ec-ihead,
#pm-workspace .pm-ec-irow {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 56px 72px 56px 96px 64px 68px;
  gap: 6px;
  padding: 0 10px;
}
#pm-workspace .pm-ec-ihead,
#pm-workspace .pm-ec-rhead,
#pm-workspace .pm-ec-chead,
#pm-workspace .pm-ec-uhead {
  flex: none;
  align-items: end;
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
  font-size: var(--pm-fs-note);
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#pm-workspace .pm-ec-irow {
  height: 34px;
  align-items: center;
  border-bottom: 1px solid var(--pm-subtle);
  font-size: var(--pm-fs-main);
  cursor: pointer;
}
#pm-workspace .pm-ec-ibody { flex: none; }
#pm-workspace .pm-ec-subhead {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 4px;
}
#pm-workspace .pm-ec-rhead,
#pm-workspace .pm-ec-rrow {
  display: grid;
  grid-template-columns: 32px minmax(100px, 1fr) 92px 92px 100px 82px 56px;
  gap: 6px;
  padding-left: 10px;
  padding-right: 10px;
}
#pm-workspace .pm-ec-chead,
#pm-workspace .pm-ec-crow {
  display: grid;
  grid-template-columns: 32px minmax(120px, 1fr) 74px 72px 100px 82px 60px;
  gap: 6px;
  padding-left: 10px;
  padding-right: 10px;
}
#pm-workspace .pm-ec-uhead,
#pm-workspace .pm-ec-urow {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 76px;
  gap: 6px;
  padding-left: 10px;
  padding-right: 10px;
}
#pm-workspace .pm-ec-uhead { margin-top: 10px; }
#pm-workspace .pm-ec-rbody { flex: 1 1 0; min-height: 0; overflow: auto; }
#pm-workspace .pm-ec-rrow,
#pm-workspace .pm-ec-crow,
#pm-workspace .pm-ec-urow {
  height: 30px;
  align-items: center;
  border-bottom: 1px solid var(--pm-subtle);
  font-size: var(--pm-fs-main);
}
#pm-workspace .pm-ec-rrow { cursor: pointer; }
#pm-workspace .pm-ec-irow:hover,
#pm-workspace .pm-ec-rrow:hover { background: var(--pm-hover); }
#pm-workspace .pm-ec-irow.is-sel,
#pm-workspace .pm-ec-rrow.is-sel { background: var(--pm-sel); }

/* A sector's right pane: the issuer picked (credit), or the sector's
   expected earnings growth (equity). */
#pm-workspace .pm-ec-detail { width: 300px; flex: none; }
#pm-workspace .pm-ec-dlabel { padding: 8px 10px 2px; }
#pm-workspace .pm-ec-ruled { border-top: 1px solid var(--pm-subtle); }
#pm-workspace .pm-ec-cds-chart { flex: none; height: 150px; padding: 0 4px; }
#pm-workspace .pm-ec-lev {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 4px;
  border-top: 1px solid var(--pm-subtle);
}
#pm-workspace .pm-ec-lev-track { position: relative; height: 18px; }
#pm-workspace .pm-ec-lev-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 2px;
  background: var(--pm-track);
}
#pm-workspace .pm-ec-lev-tick {
  position: absolute;
  top: 3px;
  height: 12px;
  border-left: 1px solid var(--text-muted);
}
#pm-workspace .pm-ec-lev-dot {
  position: absolute;
  top: 4px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--text);
}
#pm-workspace .pm-ec-lev-labels {
  position: relative;
  height: 17px;
  font-size: var(--pm-fs-note);
  color: var(--text-muted);
}
#pm-workspace .pm-ec-lev-labels > span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
#pm-workspace .pm-ec-dlines { padding: 0 0 6px; overflow: auto; }
#pm-workspace .pm-ec-dline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  padding: 3px 10px;
  font-size: var(--pm-fs-main);
}
#pm-workspace .pm-ec-dline > span:last-child { white-space: nowrap; color: var(--text); }
#pm-workspace .pm-ec-detail .pm-pane-head + .pm-ec-dlines { padding-top: 6px; }

/* ── Charts ──────────────────────────────────────────────────────────

   The chart in focus, the saved charts and the Curves card in the left
   column, the position tiles in a 560px column beside them. The grid's
   rows are set by the page (charts.js `layoutGrid`), because the Curves
   row comes and goes. */

#pm-workspace .pm-ch {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 560px;
  gap: 8px;
  padding: 8px;
}
#pm-workspace .pm-ch-focus { grid-area: focus; }
#pm-workspace .pm-ch-saved { grid-area: saved; }
#pm-workspace .pm-ch-curves { grid-area: curves; }
#pm-workspace .pm-ch-pos { grid-area: positions; }
#pm-workspace .pm-ch .num { font-family: var(--font-mono); }
#pm-workspace .pm-ch .is-pos:not(.pm-ch-key-box) { color: var(--positive); }
#pm-workspace .pm-ch .is-neg:not(.pm-ch-key-box) { color: var(--negative); }
#pm-workspace .pm-ch-table { color: var(--text-table); }
#pm-workspace .pm-ch-muted { color: var(--text-muted); }

/* The toolbar: the instrument, the comparison, the range and the saves. */
#pm-workspace .pm-ch-toolbar {
  position: relative;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border);
}
#pm-workspace .pm-ch-search {
  width: 240px;
  height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--pm-fs-main);
  cursor: pointer;
}
#pm-workspace .pm-ch-glyph { color: var(--text-muted); font-size: var(--pm-fs-main); }
#pm-workspace .pm-ch-search-sym { font-weight: 600; white-space: nowrap; }
#pm-workspace .pm-ch-search-name {
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--pm-fs-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pm-workspace .pm-ch-caret { margin-left: auto; color: var(--text-muted); font-size: 12px; }
/* The field a name is typed into: in the toolbar while the instrument in
   focus is picked, at the head of the picker while one is added to the
   comparison. */
#pm-workspace .pm-ch-search.is-open {
  border-color: var(--color-accent);
  cursor: text;
}
#pm-workspace .pm-ch-query {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--pm-fs-main);
}
#pm-workspace .pm-ch-query::placeholder { color: var(--text-muted); }
#pm-workspace .pm-ch-chip {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 4px 0 7px;
  border: 1px solid var(--border);
  border-radius: 3px;
  white-space: nowrap;
}
#pm-workspace .pm-ch-swatch {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
#pm-workspace .pm-ch-swatch--sm { width: 6px; height: 6px; border-radius: 1px; }
#pm-workspace .pm-ch-chip-sym { font-size: var(--pm-fs-main); font-weight: 600; }
#pm-workspace .pm-ch-x {
  padding: 0 3px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: var(--pm-fs-main);
  line-height: 1;
  cursor: pointer;
}
#pm-workspace .pm-ch-x:hover { color: var(--text); }
#pm-workspace .pm-ch-add {
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border: 1px dashed var(--border);
  border-radius: 3px;
  background: none;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: var(--pm-fs-main);
  white-space: nowrap;
  cursor: pointer;
}
#pm-workspace .pm-ch-add:hover { color: var(--text); }
#pm-workspace .pm-ch-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
#pm-workspace .pm-ch-name {
  width: 130px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--color-accent);
  border-radius: 3px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--pm-fs-main);
  outline: none;
}
#pm-workspace .pm-ch-btn {
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--pm-fs-main);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
#pm-workspace .pm-ch-btn.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
#pm-workspace .pm-ch-btn--quiet { font-weight: 400; color: var(--text-secondary); }
#pm-workspace .pm-ch-btn:hover:not(:disabled):not(.is-active) { background: var(--pm-hover); }
#pm-workspace .pm-ch-btn:disabled,
#pm-workspace .pm-ch-add:disabled { opacity: 0.5; cursor: default; }

/* The instrument picker: the one dropdown with a shadow. */
#pm-workspace .pm-ch-picker {
  position: absolute;
  left: 8px;
  top: 38px;
  z-index: 5;
  width: 360px;
  max-height: 420px;
  overflow: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
#pm-workspace .pm-ch-picker-head {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
#pm-workspace .pm-ch-picker-head .pm-ch-x { margin-left: auto; }
#pm-workspace .pm-ch-pick-group {
  padding: 6px 8px 2px;
  font-size: var(--pm-fs-note);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#pm-workspace .pm-ch-pick-row {
  width: 100%;
  height: 30px;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--pm-fs-main);
  text-align: left;
  cursor: pointer;
}
#pm-workspace .pm-ch-pick-row:hover,
#pm-workspace .pm-ch-pick-row.is-active { background: var(--pm-hover); }
#pm-workspace .pm-ch-pick-row.is-sel { background: var(--pm-sel); }
#pm-workspace .pm-ch-pick-sym,
#pm-workspace .pm-ch-pick-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pm-workspace .pm-ch-pick-sym { font-weight: 600; }
#pm-workspace .pm-ch-pick-name { color: var(--text-secondary); }
#pm-workspace .pm-ch-pick-held { font-size: var(--pm-fs-note); }

/* The reading line and the legend under the toolbar. */
#pm-workspace .pm-ch-info {
  height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 10px;
  border-bottom: 1px solid var(--pm-subtle);
  white-space: nowrap;
  overflow: hidden;
}
#pm-workspace .pm-ch-info:empty { display: none; }
#pm-workspace .pm-ch-info-item { display: flex; align-items: baseline; gap: 5px; }
#pm-workspace .pm-ch-info-label { font-size: var(--pm-fs-note); color: var(--text-muted); }
#pm-workspace .pm-ch-info-value { font-size: var(--pm-fs-main); color: var(--text); }
#pm-workspace .pm-ch-info-value.is-strong { font-weight: 600; }
#pm-workspace .pm-ch-legend {
  height: 22px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px;
  font-size: var(--pm-fs-note);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
}
#pm-workspace .pm-ch-legend:empty { display: none; }
#pm-workspace .pm-ch-key { display: inline-flex; align-items: center; gap: 4px; }
#pm-workspace .pm-ch-key i { display: inline-block; }
#pm-workspace .pm-ch-key-line { width: 12px; border-top: 2px solid; }
#pm-workspace .pm-ch-key-diamond {
  width: 7px;
  height: 7px;
  background: var(--pm-news);
  transform: rotate(45deg);
}
#pm-workspace .pm-ch-key-box { width: 7px; height: 7px; border-radius: 1px; }
#pm-workspace .pm-ch-key-box.is-pos { background: var(--positive); }
#pm-workspace .pm-ch-key-box.is-neg { background: var(--negative); }
#pm-workspace .pm-ch-key-dash { width: 14px; border-top: 1px dashed var(--text-secondary); }
#pm-workspace .pm-ch-key-day0 { width: 2px; height: 10px; background: var(--pm-spike); }

/* The plot and, under it on the same days, the position strip. Each has
   a layer for the crosshair laid over it, placed on the plot's own box. */
#pm-workspace .pm-ch-plot {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  padding: 0 4px;
}
#pm-workspace .pm-ch-chart { width: 100%; height: 100%; }
#pm-workspace .pm-ch-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
#pm-workspace .pm-ch-cross {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  right: 4px;
  pointer-events: none;
}
#pm-workspace .pm-ch-vline {
  position: absolute;
  width: 0;
  border-left: 1px dashed var(--text-secondary);
  opacity: 0.7;
}
#pm-workspace .pm-ch-hline {
  position: absolute;
  height: 0;
  border-top: 1px dashed var(--text-secondary);
  opacity: 0.5;
}
#pm-workspace .pm-ch-ybox {
  position: absolute;
  transform: translateY(-50%);
  height: 20px;
  padding: 0 4px;
  border: 1px solid var(--border);
  background: var(--pm-tip-bg);
  color: var(--text);
  font-size: var(--pm-fs-note);
  line-height: 18px;
  white-space: nowrap;
}
#pm-workspace .pm-ch-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--bg-surface);
}
#pm-workspace .pm-ch-tip {
  position: absolute;
  z-index: 2;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--pm-tip-bg);
  color: var(--text-muted);
  font-size: var(--pm-fs-note);
  white-space: nowrap;
  max-width: 280px;
}
/* A headline wraps inside the box's width; the readings above it do not. */
#pm-workspace .pm-ch-tip-text {
  margin: 2px 0;
  line-height: 18px;
  white-space: normal;
}
#pm-workspace .pm-ch-tip-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  line-height: 18px;
}
#pm-workspace .pm-ch-tip-line.is-bold { font-weight: 600; }
#pm-workspace .pm-ch-tip-line .num { color: var(--text); }
#pm-workspace .pm-ch-strip {
  position: relative;
  flex: none;
  height: 51px;
  padding: 0 4px;
  border-top: 1px solid var(--pm-subtle);
}
#pm-workspace .pm-ch-strip-chart { width: 100%; height: 50px; }
#pm-workspace .pm-ch-strip-label {
  position: absolute;
  left: 8px;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  font-size: var(--pm-fs-note);
  color: var(--text-muted);
}

/* The saved charts: four tiles to the row's width, more by scrolling. */
#pm-workspace .pm-ch-saved-title {
  height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
}
#pm-workspace .pm-ch-saved-grid {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 18px) / 4);
  gap: 6px;
  padding: 0 6px 6px;
  overflow-x: auto;
}
#pm-workspace .pm-ch-saved-tile,
#pm-workspace .pm-ch-tile {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  cursor: pointer;
}
#pm-workspace .pm-ch-saved-tile:hover,
#pm-workspace .pm-ch-tile:hover { background: var(--pm-hover); }
#pm-workspace .pm-ch-saved-tile.is-sel,
#pm-workspace .pm-ch-tile.is-sel {
  background: var(--pm-sel);
  border-color: var(--color-accent);
}
#pm-workspace .pm-ch-saved-head {
  height: 22px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
}
#pm-workspace .pm-ch-saved-name {
  min-width: 0;
  font-size: var(--pm-fs-main);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pm-workspace .pm-ch-saved-head .pm-ch-x { margin-left: auto; }
/* The lines are drawn again with every print, so they take no pointer:
   the click lands on the tile, which stays put. */
#pm-workspace .pm-ch-saved-spark,
#pm-workspace .pm-ch-tile-spark {
  flex: 1 1 0;
  min-height: 0;
  pointer-events: none;
}
#pm-workspace .pm-ch-saved-spark svg,
#pm-workspace .pm-ch-tile-spark svg { display: block; height: 100%; }

/* The Curves card, open or folded to one line. */
#pm-workspace .pm-ch-curves-head {
  height: 34px;
  padding: 0 8px;
  border-bottom-color: var(--pm-subtle);
}
#pm-workspace .pm-ch-modes {
  min-width: 0;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}
#pm-workspace .pm-ch-toggle { margin-left: auto; height: 26px; font-size: var(--pm-fs-main); }
#pm-workspace .pm-ch-summary {
  min-width: 0;
  display: flex;
  gap: 10px;
  overflow: hidden;
  font-size: var(--pm-fs-note);
  color: var(--text-muted);
  white-space: nowrap;
}
#pm-workspace .pm-ch-summary b { color: var(--text-secondary); font-weight: 600; }
#pm-workspace .pm-ch-summary .pm-ch-text { color: var(--text); }
#pm-workspace .pm-ch-curve-chips {
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  overflow: hidden;
}
#pm-workspace .pm-ch-region { padding: 1px 7px; }
#pm-workspace .pm-ch-region.is-picked {
  background: var(--pm-sel);
  border-color: var(--color-accent);
}
#pm-workspace .pm-ch-region:not(.is-picked) { color: var(--text-muted); }
#pm-workspace .pm-ch-curve-legend {
  margin-left: auto;
  display: flex;
  gap: 10px;
  font-size: var(--pm-fs-note);
  color: var(--text-muted);
  white-space: nowrap;
}
#pm-workspace .pm-ch-curve-body { flex: 1 1 0; min-height: 0; padding: 0 4px 4px; }
#pm-workspace .pm-ch-curve-chart { width: 100%; height: 100%; }

/* The position tiles: two to a row, sorted by the header's chips. */
#pm-workspace .pm-ch-pos-head { height: 34px; gap: 6px; padding: 0 8px; }
#pm-workspace .pm-ch-sorts { gap: 2px; font-size: var(--pm-fs-note); color: var(--text-muted); }
#pm-workspace .pm-ch-sort {
  padding: 1px 6px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: var(--pm-fs-main);
  white-space: nowrap;
  cursor: pointer;
}
#pm-workspace .pm-ch-sort.is-active { background: var(--color-accent); color: #fff; }
#pm-workspace .pm-ch-tiles {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 134px;
  align-content: start;
  gap: 6px;
  padding: 6px;
  overflow: auto;
}
#pm-workspace .pm-ch-empty-msg { grid-column: 1 / -1; padding: 4px; }
#pm-workspace .pm-ch-tile-head {
  height: 26px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
}
#pm-workspace .pm-ch-tile-sym { font-weight: 600; }
#pm-workspace .pm-ch-tile-name {
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--pm-fs-note);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pm-workspace .pm-ch-tile-side { margin-left: auto; font-size: var(--pm-fs-note); white-space: nowrap; }
#pm-workspace .pm-ch-tile-cmp {
  padding: 0 0 0 2px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: var(--pm-fs-main);
  line-height: 1;
  cursor: pointer;
}
#pm-workspace .pm-ch-tile-cmp.is-on { color: var(--color-accent-text); }
#pm-workspace .pm-ch-tile-cmp:hover { color: var(--text); }
#pm-workspace .pm-ch-tile-foot {
  height: 40px;
  flex: none;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 0 6px;
  border-top: 1px solid var(--pm-subtle);
  white-space: nowrap;
}
#pm-workspace .pm-ch-tile-foot > span { display: flex; flex-direction: column; }
#pm-workspace .pm-ch-tile-foot > span.right { align-items: flex-end; }
#pm-workspace .pm-ch-cell-label { font-size: var(--pm-fs-label); color: var(--text-muted); }
#pm-workspace .pm-ch-tile-foot .num { font-size: var(--pm-fs-note); }

/* ── Performance & Risk ──────────────────────────────────────────────

   Analytics and Risk in one page with four sub-pages (the 2026-10
   redesign, direction 5c). Each sub-page is a grid of panes that fills
   the viewport; the tables inside the panes scroll. */

#pm-workspace .pm-pr,
#pm-workspace .pm-db {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#pm-workspace .pm-pr .num,
#pm-workspace .pm-db .num { font-family: var(--font-mono); }
#pm-workspace .pm-pr .is-pos,
#pm-workspace .pm-db .is-pos { color: var(--positive); }
#pm-workspace .pm-pr .is-neg,
#pm-workspace .pm-db .is-neg { color: var(--negative); }
#pm-workspace .pm-pr .is-warn { color: var(--warning); }
#pm-workspace .pm-pr .is-strong,
#pm-workspace .pm-db .is-strong { font-weight: 600; }
#pm-workspace .pm-pr-muted,
#pm-workspace .pm-db-muted { color: var(--text-muted); }
#pm-workspace .pm-pr-sec,
#pm-workspace .pm-db-sec { color: var(--text-secondary); }
#pm-workspace .pm-pr-table,
#pm-workspace .pm-db-table { color: var(--text-table); }
#pm-workspace .pm-pr-text,
#pm-workspace .pm-db-text { color: var(--text); }
#pm-workspace .pm-pr-ellipsis,
#pm-workspace .pm-db-ellipsis {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pm-workspace .pm-pr-empty { padding: 10px; }
/* A chart as tall as its rows, scrolling inside its pane (Volatility by
   position, the P&L decomposition). The chart's height is written by the
   script. */
#pm-workspace .pm-pr-rows { flex: 1 1 0; min-height: 0; overflow-x: hidden; overflow-y: auto; }
#pm-workspace .pm-pr-rows > .pm-pr-chart { flex: none; padding: 0; }
/* A chart on Performance & Risk has no padding: Plotly sizes its plot to
   the whole element, padding included, and draws it inside the padding,
   so a padded chart ran past its element. An enlarged pane scrolls what
   runs past, and the overflow showed as a scroll bar (owner, 2026-10-13). */
#pm-workspace .pm-pr-chart {
  flex: 1 1 0;
  min-height: 0;
}
#pm-workspace .pm-db-chart {
  flex: 1 1 0;
  min-height: 0;
  padding: 4px 4px 2px;
}

/* The line of an open breach, above every sub-page. The colour is the
   breach's: a negative ground at low alpha with a negative rule under it. */
#pm-workspace .pm-pr-banner {
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: rgba(239, 68, 68, 0.12);
  border-bottom: 1px solid var(--negative);
  font-size: var(--pm-fs-main);
  white-space: nowrap;
  overflow: hidden;
}
[data-theme="light"] #pm-workspace .pm-pr-banner { background: rgba(220, 38, 38, 0.08); }
#pm-workspace .pm-pr-banner-title { color: var(--negative); font-weight: 700; }
#pm-workspace .pm-pr-banner-sec { color: var(--text-secondary); }
#pm-workspace .pm-pr-banner-go {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent-text);
  font-family: var(--font);
  font-size: var(--pm-fs-main);
  font-weight: 600;
  cursor: pointer;
}

#pm-workspace .pm-pr-grid {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  gap: 8px;
  padding: 8px;
}
#pm-workspace .pm-pr-grid--pnl {
  grid-template-columns: minmax(0, 600fr) minmax(0, 534fr);
  grid-template-rows: minmax(0, 330fr) minmax(0, 270fr) auto;
  grid-template-areas: 'decomp names' 'equity names' 'costs names';
}
/* The ladder's row never shrinks below the ladder's scale and steps, so
   the steps stay on screen in a short window; the VaR chart above gives
   way instead. */
#pm-workspace .pm-pr-grid--risk {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 300fr) auto minmax(auto, 254fr);
  grid-template-areas: 'var vol' 'measures vol' 'ladder vol';
}
#pm-workspace .pm-pr-grid--risk.has-dv01 {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto minmax(auto, 1fr);
  grid-template-areas: 'var vol' 'dv01 vol' 'measures vol' 'ladder vol';
}
#pm-workspace .pm-pr-grid--risk.no-ladder {
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: 'var vol' 'measures vol';
}
#pm-workspace .pm-pr-grid--risk.has-dv01.no-ladder {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-areas: 'var vol' 'dv01 vol' 'measures vol';
}
#pm-workspace .pm-pr-grid--limits {
  grid-template-columns: minmax(0, 640fr) minmax(0, 494fr);
  grid-template-rows: minmax(0, 530fr) minmax(0, 262fr);
  grid-template-areas: 'limits usage' 'limits breaches';
}
#pm-workspace .pm-pr-grid--trades {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
#pm-workspace .pm-pr-decomp { grid-area: decomp; }
#pm-workspace .pm-pr-equity { grid-area: equity; }
#pm-workspace .pm-pr-costs { grid-area: costs; }
#pm-workspace .pm-pr-names { grid-area: names; }
#pm-workspace .pm-pr-var { grid-area: var; }
#pm-workspace .pm-pr-dv01 { grid-area: dv01; }
#pm-workspace .pm-pr-vol { grid-area: vol; }
#pm-workspace .pm-pr-measures { grid-area: measures; }
#pm-workspace .pm-pr-ladder { grid-area: ladder; min-height: auto; }
#pm-workspace .pm-pr-limits { grid-area: limits; }
#pm-workspace .pm-pr-usage { grid-area: usage; }
#pm-workspace .pm-pr-breaches { grid-area: breaches; }

/* A legend in a title bar, and its keys. */
#pm-workspace .pm-pr-legend {
  display: flex;
  gap: 10px;
  font-size: var(--pm-fs-note);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
}
#pm-workspace .pm-pr-key { display: inline-flex; align-items: center; gap: 4px; }
#pm-workspace .pm-pr-key > i {
  display: inline-block;
  width: 12px;
  border-top: 2px solid;
}
#pm-workspace .pm-pr-key > i.pm-pr-sq { width: 8px; height: 8px; border: 0; }
#pm-workspace .pm-pr-note { font-size: var(--pm-fs-note); color: var(--text-muted); white-space: nowrap; }
#pm-workspace .pm-pr-total { font-size: var(--pm-fs-note); color: var(--text-muted); }

/* The decomposition: the waterfall and the factor table beside it. */
#pm-workspace .pm-pr-decomp-body { flex: 1 1 0; min-height: 0; display: flex; }
#pm-workspace .pm-pr-decomp-body .pm-pr-rows { min-width: 0; padding-top: 4px; }
#pm-workspace .pm-pr-factors {
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--pm-subtle);
}
#pm-workspace .pm-pr-fhead,
#pm-workspace .pm-pr-frow {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 2px;
  align-items: center;
  height: 28px;
  padding: 0 8px;
}
#pm-workspace .pm-pr-fhead {
  flex: none;
  grid-template-columns: minmax(0, 1fr) auto;
  border-bottom: 1px solid var(--border);
  font-size: var(--pm-fs-note);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#pm-workspace .pm-pr-fbody { flex: 1 1 0; min-height: 0; overflow: auto; }
#pm-workspace .pm-pr-frow {
  border-bottom: 1px solid var(--pm-subtle);
  font-size: var(--pm-fs-main);
}
#pm-workspace .pm-pr-frow.is-toggle { cursor: pointer; }
#pm-workspace .pm-pr-frow:hover { background: var(--pm-hover); }
#pm-workspace .pm-pr-frow.is-sub {
  padding-left: 20px;
  font-size: var(--pm-fs-note);
  color: var(--text-secondary);
}
#pm-workspace .pm-pr-frow.is-total { font-weight: 600; }
#pm-workspace .pm-pr-arrow { font-size: 12px; color: var(--text-muted); }

/* Trading costs: two columns of label and value rows, filled downwards. */
#pm-workspace .pm-pr-cost-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, 30px);
  grid-auto-flow: column;
}
#pm-workspace .pm-pr-cost {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid var(--pm-subtle);
  border-right: 1px solid var(--pm-subtle);
}
#pm-workspace .pm-pr-cost.is-strong { font-weight: 600; }
#pm-workspace .pm-pr-cost-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* The formula and Reference buttons as the design's small chip, as in
   the sidebar. */
#pm-workspace .pm-pr .formula-btn,
#pm-workspace .pm-db .formula-btn {
  width: auto;
  height: 18px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 3px;
  background: transparent;
}

/* P&L by name: a sortable table with an inline bar of the after-charges
   P&L, every name on one scale, and the total pinned under it. The
   heading, the rows and the total are rows of one grid (each row a
   subgrid), so the columns line up and size to their content. The
   empty row before the total takes the space the rows leave, which
   keeps the total at the foot of the pane; when the rows overflow,
   the heading and the total stay in view while the rows scroll. */
/* The columns are as wide as their widest number and every number is set
   to the right, so the gap is all that separates one column's numbers from
   the next: at 6px commissions and carry ran together (owner, 2026-10-13). */
#pm-workspace .pm-pr-ntable {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  display: grid;
  column-gap: 16px;
}
#pm-workspace .pm-pr-nhead,
#pm-workspace .pm-pr-nrow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  padding: 0 10px;
}
#pm-workspace .pm-pr-nspan { grid-column: 1 / -1; }
#pm-workspace .pm-pr-nhead {
  position: sticky;
  top: 0;
  z-index: 1;
  align-items: end;
  padding-top: 4px;
  padding-bottom: 4px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
#pm-workspace .pm-pr-sorthead {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font);
  font-size: var(--pm-fs-note);
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
}
#pm-workspace .pm-pr-sorthead.right { text-align: right; }
/* A heading is as wide as its words, and the sort mark sits after it in
   the gap between the columns: in the heading's width it pushed a heading
   onto a second line when the column was sorted (owner, 2026-10-13). */
#pm-workspace .pm-pr-sorthead { position: relative; justify-self: start; }
#pm-workspace .pm-pr-sorthead.right { justify-self: end; }
#pm-workspace .pm-pr-sortmark { position: absolute; left: 100%; bottom: 0; padding-left: 2px; }
#pm-workspace .pm-pr-sorthead:hover,
#pm-workspace .pm-pr-sorthead.is-on { color: var(--text); }
#pm-workspace .pm-pr-nrow {
  height: 28px;
  border-bottom: 1px solid var(--pm-subtle);
  font-size: var(--pm-fs-main);
}
#pm-workspace .pm-pr-nrow:hover { background: var(--pm-hover); }
#pm-workspace .pm-pr-nrow.is-group {
  background: var(--bg);
  font-size: var(--pm-fs-main);
  font-weight: 600;
}
#pm-workspace .pm-pr-ngroup {
  grid-column: 1 / span 2;
  min-width: 0;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pm-workspace .pm-pr-nrow.is-total {
  position: sticky;
  bottom: 0;
  background: var(--bg-surface);
  height: 30px;
  border-top: 1px solid var(--border);
  border-bottom: 0;
  font-weight: 600;
}
#pm-workspace .pm-pr-nbar { position: relative; height: 10px; }
#pm-workspace .pm-pr-nbar > i { position: absolute; }
#pm-workspace .pm-pr-nzero {
  left: 50%;
  top: -2px;
  bottom: -2px;
  border-left: 1px solid var(--pm-spike);
}
#pm-workspace .pm-pr-nfill { top: 0; bottom: 0; opacity: 0.85; }
#pm-workspace .pm-pr-nfill.is-pos { background: var(--positive); }
#pm-workspace .pm-pr-nfill.is-neg { background: var(--negative); }

/* The risk measures: a 3 by 2 grid of readings, then the band. */
#pm-workspace .pm-pr-measure-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#pm-workspace .pm-pr-measure {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 5px 10px;
  border-right: 1px solid var(--pm-subtle);
  border-bottom: 1px solid var(--pm-subtle);
}
#pm-workspace .pm-pr-measure-label {
  display: inline-flex;
  align-items: center;
  font-size: var(--pm-fs-label);
  color: var(--text-muted);
  white-space: nowrap;
}
#pm-workspace .pm-pr-measure-value { font-size: 16px; font-weight: 600; white-space: nowrap; }
#pm-workspace .pm-pr-caption { padding: 8px 10px 0; font-size: var(--pm-fs-note); color: var(--text-muted); }
/* The scale's height is the chart's, set by the script (performance.js
   SCALE). */
#pm-workspace .pm-pr-scale { flex: none; padding: 0 6px; }

/* The drawdown ladder: its scale, the steps and what has happened. */
/* The ladder's log of the steps taken takes the room left and scrolls. */
#pm-workspace .pm-pr-ladder-body { flex: 1 0 auto; display: flex; flex-direction: column; }
#pm-workspace .pm-pr-llog {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  padding: 4px 10px;
  font-size: var(--pm-fs-note);
  color: var(--text-secondary);
}
#pm-workspace .pm-pr-llog > div { padding: 3px 0; }

/* The limits: every limit with a meter scaled to 125% of the limit, the
   ticks at the limit, and a centre line where the limit has two sides. */
#pm-workspace .pm-pr-chip {
  padding: 0 6px;
  border: 1px solid var(--warning);
  border-radius: 3px;
  font-size: var(--pm-fs-note);
  color: var(--warning);
  white-space: nowrap;
}
/* The limits: the heading and the rows are rows of one grid (each row a
   subgrid), as in P&L by name, so every column takes the width of its
   widest heading or number and the measure's name takes what is left.
   Fixed widths cut the numbers and ran the headings into each other
   (owner, 2026-10-13). The heading stays in view while the rows scroll,
   and the rows keep their own height however tall the pane is. */
#pm-workspace .pm-pr-limtable {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto auto auto minmax(120px, 170px) auto auto;
  align-content: start;
  column-gap: 16px;
}
#pm-workspace .pm-pr-limhead,
#pm-workspace .pm-pr-limrow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  padding: 0 10px;
}
#pm-workspace .pm-pr-limhead {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 28px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--pm-fs-note);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
#pm-workspace .pm-pr-limrow {
  height: 30px;
  border-bottom: 1px solid var(--pm-subtle);
  font-size: var(--pm-fs-main);
}
#pm-workspace .pm-pr-limrow:hover { background: var(--pm-hover); }
#pm-workspace .pm-pr-limrow.is-sel { background: var(--pm-sel); }
#pm-workspace .pm-pr-limgroup {
  grid-column: 1 / -1;
  height: 26px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--pm-subtle);
  font-size: var(--pm-fs-note);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#pm-workspace .pm-pr-meter {
  position: relative;
  height: 12px;
  background: var(--pm-track);
}
#pm-workspace .pm-pr-meter > i { position: absolute; }
#pm-workspace .pm-pr-tick { top: -2px; bottom: -2px; border-left: 1px solid var(--text-muted); }
#pm-workspace .pm-pr-centre { top: -1px; bottom: -1px; border-left: 1px solid var(--text-muted); }
#pm-workspace .pm-pr-mfill { top: 2px; bottom: 2px; }
#pm-workspace .pm-pr-mfill.is-ok { background: var(--pm-meter); }
#pm-workspace .pm-pr-mfill.is-warn { background: var(--warning); }
#pm-workspace .pm-pr-mfill.is-neg { background: var(--negative); }

/* The breaches: one row per limit breach with its days drawn as a bar on
   the session's day scale (owner, 2026-10-13: a separate timeline named
   every limit a second time and ran into the table). The heading and the
   rows are rows of one grid, as on Limits, so every column takes the width
   of its widest heading or entry and the bar takes what is left. */
#pm-workspace .pm-pr-breach-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
#pm-workspace .pm-pr-btable {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(80px, auto) auto auto auto auto minmax(120px, 1fr);
  align-content: start;
  column-gap: 16px;
}
#pm-workspace .pm-pr-btable > .pm-pr-empty { grid-column: 1 / -1; }
#pm-workspace .pm-pr-bhead,
#pm-workspace .pm-pr-brow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  padding: 0 10px;
}
#pm-workspace .pm-pr-bhead {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 28px;
  background: var(--bg-surface);
  border-top: 1px solid var(--pm-subtle);
  border-bottom: 1px solid var(--border);
  font-size: var(--pm-fs-note);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
#pm-workspace .pm-pr-bscale { display: flex; justify-content: space-between; }
#pm-workspace .pm-pr-brow {
  height: 28px;
  border-bottom: 1px solid var(--pm-subtle);
  font-size: var(--pm-fs-main);
}
#pm-workspace .pm-pr-bfill { top: 2px; bottom: 2px; min-width: 2px; opacity: 0.85; }
#pm-workspace .pm-pr-bfill.is-active { background: var(--negative); }
#pm-workspace .pm-pr-bfill.is-cured { background: var(--positive); }
#pm-workspace .pm-pr-bfill.is-forced_reduction { background: var(--warning); }
#pm-workspace .pm-pr-bdue { top: -2px; bottom: -2px; border-left: 1px dashed var(--negative); }

/* The trade record. */
#pm-workspace .pm-pr-select {
  height: 26px;
  padding: 0 4px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--pm-fs-main);
}
/* The trade record: the heading and the rows are rows of one grid (each
   row a subgrid), as on Limits, so every column takes the width of its
   widest heading or entry and the note takes what is left. A fixed width
   cut a currency amount such as 4,000,000 EUR (owner, 2026-10-13). */
#pm-workspace .pm-pr-ttable {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(7, auto) minmax(0, 1fr);
  align-content: start;
  column-gap: 16px;
}
#pm-workspace .pm-pr-ttable > .pm-pr-empty { grid-column: 1 / -1; }
#pm-workspace .pm-pr-thead,
#pm-workspace .pm-pr-trow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  padding: 0 10px;
}
#pm-workspace .pm-pr-thead {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 28px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--pm-fs-note);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
#pm-workspace .pm-pr-trow {
  height: 28px;
  border-bottom: 1px solid var(--pm-subtle);
  font-size: var(--pm-fs-main);
}
#pm-workspace .pm-pr-trow:hover { background: var(--pm-hover); }

/* ── Debrief ─────────────────────────────────────────────────────────

   The report in three sub-pages (the 2026-10 redesign, direction 7a).
   The bar carries the sub-pages and the team report; the grid under it
   scrolls when a sub-page runs longer than the screen. */

#pm-workspace .pm-db-bar { align-items: stretch; }
#pm-workspace .pm-db-report {
  margin: auto 6px auto auto;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 3px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font);
  font-size: var(--pm-fs-main);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
#pm-workspace .pm-db-grid {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  gap: 8px;
  padding: 8px;
  overflow: auto;
}
#pm-workspace .pm-db-grid--result {
  grid-template-columns: minmax(0, 560fr) minmax(0, 574fr);
  grid-template-rows: 78px minmax(262px, 262fr) minmax(304px, 304fr) minmax(276px, 276fr);
  grid-template-areas: 'hero hero' 'standings working' 'scorecard measures' 'leaders measures';
}
#pm-workspace .pm-db-grid--risk {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(300px, 360fr) minmax(320px, 410fr);
  grid-template-areas: 'equity usage' 'decomp decomp';
}
#pm-workspace .pm-db-grid--story {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
  align-content: start;
}
#pm-workspace .pm-db-hero { grid-area: hero; flex-direction: row; }
#pm-workspace .pm-db-standings { grid-area: standings; }
#pm-workspace .pm-db-working { grid-area: working; }
#pm-workspace .pm-db-scorecard { grid-area: scorecard; }
#pm-workspace .pm-db-leaders { grid-area: leaders; }
#pm-workspace .pm-db-measures { grid-area: measures; }
#pm-workspace .pm-db-equity { grid-area: equity; }
#pm-workspace .pm-db-usage { grid-area: usage; }
#pm-workspace .pm-db-grid--risk .pm-pr-decomp { grid-area: decomp; }

/* The result strip. */
#pm-workspace .pm-db-hero-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 0 14px;
  border-right: 1px solid var(--pm-subtle);
}
#pm-workspace .pm-db-hero-cell.is-wide { flex: 0 0 190px; }
#pm-workspace .pm-db-hero-label {
  font-size: var(--pm-fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
#pm-workspace .pm-db-hero-line { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
#pm-workspace .pm-db-hero-big { font-size: 26px; font-weight: 600; line-height: 1; }
#pm-workspace .pm-db-hero-value { font-size: 18px; font-weight: 600; }
#pm-workspace .pm-db-hero-sub { font-size: var(--pm-fs-label); color: var(--text-muted); }

/* Tables of the result: the standings, the score working, the scorecard,
   the leaders and the measures. */
#pm-workspace .pm-db-shead,
#pm-workspace .pm-db-srow {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 70px 80px 90px;
  gap: 6px;
  align-items: center;
  padding: 0 10px;
}
#pm-workspace .pm-db-whead,
#pm-workspace .pm-db-wrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 70px 112px;
  gap: 6px;
  align-items: center;
  padding: 0 10px;
}
#pm-workspace .pm-db-mhead,
#pm-workspace .pm-db-mrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px 100px;
  gap: 6px;
  align-items: center;
  padding: 0 10px;
}
#pm-workspace .pm-db-shead,
#pm-workspace .pm-db-whead,
#pm-workspace .pm-db-mhead,
#pm-workspace .pm-db-ehead,
#pm-workspace .pm-db-thead,
#pm-workspace .pm-db-ihead {
  flex: none;
  min-height: 28px;
  border-bottom: 1px solid var(--border);
  font-size: var(--pm-fs-note);
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#pm-workspace .pm-db-sbody { flex: 1 1 0; min-height: 0; overflow: auto; }
#pm-workspace .pm-db-srow,
#pm-workspace .pm-db-wrow,
#pm-workspace .pm-db-lrow {
  height: 30px;
  border-bottom: 1px solid var(--pm-subtle);
  font-size: var(--pm-fs-main);
}
#pm-workspace .pm-db-srow.is-sel,
#pm-workspace .pm-db-lrow.is-sel { background: var(--pm-sel); font-weight: 600; }
#pm-workspace .pm-db-team { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
#pm-workspace .pm-db-tag {
  padding: 0 5px;
  border: 1px solid var(--color-accent-text);
  border-radius: 3px;
  font-size: var(--pm-fs-note);
  font-weight: 600;
  line-height: 17px;
  color: var(--color-accent-text);
}
#pm-workspace .pm-db-wrow > span:first-child { display: inline-flex; align-items: center; }
#pm-workspace .pm-db-wrow.is-ruled { border-top: 1px solid var(--border); }
#pm-workspace .pm-db-wrow.is-strong { font-weight: 600; }
#pm-workspace .pm-db-cgrid {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  align-content: start;
  overflow: auto;
}
#pm-workspace .pm-db-cgrid--flow { grid-auto-flow: row; grid-template-rows: none; flex: none; }
#pm-workspace .pm-db-crow {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid var(--pm-subtle);
  border-right: 1px solid var(--pm-subtle);
  white-space: nowrap;
}
#pm-workspace .pm-db-crow > span:first-child {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}
#pm-workspace .pm-db-lrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 110px;
  gap: 6px;
  align-items: center;
  padding: 0 10px;
}
#pm-workspace .pm-db-legend { gap: 10px; font-size: var(--pm-fs-note); color: var(--text-muted); }
#pm-workspace .pm-db-mbody { flex: 1 1 0; min-height: 0; overflow: auto; }
#pm-workspace .pm-db-mgroup {
  width: 100%;
  height: 30px;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
  padding: 0 10px;
  border: 0;
  border-bottom: 1px solid var(--pm-subtle);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--pm-fs-main);
  text-align: left;
  cursor: pointer;
}
#pm-workspace .pm-db-mgroup:hover { background: var(--pm-hover); }
#pm-workspace .pm-db-mcount {
  display: flex;
  gap: 8px;
  font-size: var(--pm-fs-note);
  color: var(--text-muted);
  white-space: nowrap;
}
#pm-workspace .pm-db-mrow {
  height: 28px;
  padding-left: 28px;
  border-bottom: 1px solid var(--pm-subtle);
  font-size: var(--pm-fs-main);
}
#pm-workspace .pm-db-mrow:hover { background: var(--pm-hover); }
#pm-workspace .pm-db-qmark { margin-right: 5px; font-size: 12px; }
#pm-workspace .pm-db-arrow { font-size: 12px; color: var(--text-muted); }

/* The story: the capture chart, the mispricings and the mandate's own
   blocks, each as tall as it needs. */
#pm-workspace .pm-db-capture .pm-db-chart { flex: none; height: 300px; }
#pm-workspace .pm-db-chart--tall { flex: none; height: 360px; }
#pm-workspace .pm-db-ehead,
#pm-workspace .pm-db-erow {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 110px 100px 220px 160px;
  gap: 8px;
  align-items: center;
  padding: 0 10px;
}
#pm-workspace .pm-db-erow {
  min-height: 36px;
  border-bottom: 1px solid var(--pm-subtle);
  font-size: var(--pm-fs-main);
  cursor: pointer;
}
#pm-workspace .pm-db-erow:hover { background: var(--pm-hover); }
#pm-workspace .pm-db-erow.is-sel { background: var(--pm-sel); border-bottom: 0; }
#pm-workspace .pm-db-edesc {
  padding: 2px 10px 10px 36px;
  border-bottom: 1px solid var(--pm-subtle);
  background: var(--bg);
  font-size: var(--pm-fs-main);
  line-height: 1.5;
  color: var(--text-secondary);
}
#pm-workspace .pm-db-edesc p { max-width: 860px; margin: 6px 0 0; }
#pm-workspace .pm-db-chartbtns { display: flex; flex-wrap: wrap; gap: 4px; }
#pm-workspace .pm-db-chartbtn {
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--pm-fs-main);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
#pm-workspace .pm-db-chartbtn:hover { background: var(--pm-hover); }
#pm-workspace .pm-db-thead,
#pm-workspace .pm-db-trow {
  display: grid;
  gap: 8px;
  align-items: center;
  padding: 0 10px;
}
#pm-workspace .pm-db-thead { align-items: end; padding-top: 4px; padding-bottom: 4px; }
#pm-workspace .pm-db-trow {
  height: 30px;
  border-bottom: 1px solid var(--pm-subtle);
  font-size: var(--pm-fs-main);
}

/* Before the report: the interim standings and the note. */
#pm-workspace .pm-db-pre {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
}
#pm-workspace .pm-db-interim,
#pm-workspace .pm-db-note { width: 940px; max-width: 100%; }
#pm-workspace .pm-db-note { padding: 14px; font-size: var(--pm-fs-main); color: var(--text-secondary); }
#pm-workspace .pm-db-ihead,
#pm-workspace .pm-db-irow {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) repeat(6, 90px);
  gap: 6px;
  align-items: center;
  padding: 0 10px;
}
#pm-workspace .pm-db-irow { height: 34px; background: var(--pm-sel); font-size: var(--pm-fs-main); }
#pm-workspace .pm-db-ihead .pm-score-head { justify-content: flex-end; }

/* ── Briefing ──────────────────────────────────────────────────────── */

/* The same reading layout the trainer guide uses, copied from the console
   stylesheet (css/console.css :1055-1090 and the .doc-* block at :348-366):
   a sticky table of contents beside flowing prose. The two reference
   surfaces of this sim read the same way. */

/* The Briefing is a document, so it takes the handbook's own geometry: the
   nav rail and reading measure the platform's chapter pages use, from the
   tokens base.css already carries. The params sidebar is collapsed on this
   page (app.js sets the class), because the live book has nothing to do
   with reading the mechanics, and the document centres in what that
   leaves. The collapse reuses the platform's own sidebar-collapsed rule
   rather than a second mechanism. */
#pm-workspace.pm-briefing-active .params-sidebar.visible {
  width: 0;
  min-width: 0;
  overflow: hidden;
}
/* This page owns the collapse, so the workspace toggle would do nothing
   here. It is hidden rather than left as a dead control. */
#pm-workspace.pm-briefing-active .sidebar-toggle-btn { display: none; }
/* A document opens below the header rather than against it. The shared
   `.tab-content-area` pads 16px, which is right for a page of panels and
   too tight for the first line of prose and the top of the chapter index. */
#pm-workspace.pm-briefing-active .tab-content-area { padding-top: 48px; }
#pm-workspace .ref-mechanics .data-table-wrap.data-table-wide {
  max-width: none;
  width: 100%;
}
#pm-workspace .ref-toc-group {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 6px 10px 4px 6px;
  margin-top: 14px;
}
#pm-workspace .ref-toc-group:first-child { margin-top: 0; padding-top: 2px; }

/* The Reference button beside a formula button. It shares .formula-btn's
   chassis, and that class draws its glyph with ::before (the button's own
   text is hidden by font-size: 0), so without this override the "i"
   rendered as a second f. An upright i has no hook descender, so the
   f's optical-centring nudge comes off too. */
.briefing-btn::before {
    content: 'i';
    transform: none;
}

#pm-workspace .doc-param { padding: 14px 0; border-top: 1px solid var(--border); }
#pm-workspace .doc-param-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
/* No sizes of their own. A named block is prose on a page of prose, and
   three bespoke sizes here (14.5 for the name, 13.5 for the body, 12 for a
   gloss that no longer exists) made the order types read smaller than
   everything around them and the name read smaller than its own paragraph.
   Weight and colour separate the name from the body; the page decides how
   big any of it is. */
#pm-workspace .doc-param-name { font-weight: 600; color: var(--text); }
#pm-workspace .doc-param-body { margin-top: 6px; }
#pm-workspace .doc-param-body p {
  margin: 0 0 8px;
  color: var(--text-secondary);
}
#pm-workspace .doc-param-body p:last-child { margin-bottom: 0; }

/* ── Desktop-only notice ───────────────────────────────────────────── */

/* Below 1200px the sidebar and the desk's two columns (600px market
   minimum plus the cards column) no longer fit beside each other. The
   workspace toggle (app.js initSidebarToggle) starts collapsed there, so
   a landscape tablet (1024px and up) opens the desk at full width and
   the sidebar stays one tap away. */

#pm-workspace .pm-desktop-notice { display: none; }
/* Below 1024px even the full viewport is narrower than the desk's two
   columns, so the notice replaces the desk. 1023 rather than the 1024
   tablet tier, so a 1024px-wide tablet in landscape gets the desk. */
@media (max-width: 1023px) {
  #pm-workspace .pm-desk { display: none; }
  #pm-workspace .pm-desktop-notice {
    display: block;
    padding: 24px 4px;
    max-width: 520px;
  }
}

/* The analysis pause of a heavy data day: a bar above the desk with the
   time left until trading reopens, in the observer bar's place and size.
   The desk stays readable; the ticket's two buttons are greyed while the
   room is closed for trading. */
#pm-pause-banner {
  flex: 0 0 auto;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 7px 16px;
}
body.pm-analysis-pause #pm-t-buy,
body.pm-analysis-pause #pm-t-sell { pointer-events: none; opacity: 0.55; }

/* Lock what would otherwise be sent to the room, so the bar's statement
   holds rather than relying on the server dropping the message. Everything
   that only reads stays live: pages, sorting, selection, the enlarge
   buttons and the theme toggle. */
body.pm-observer #pm-t-buy,
body.pm-observer #pm-t-sell,
body.pm-observer .pm-ticket-close,
body.pm-observer .pm-orders-frame [data-cancel],
body.pm-observer .pm-positions-frame [data-close] { display: none; }
body.pm-observer .pm-ticket input,
body.pm-observer .pm-ticket select { pointer-events: none; opacity: 0.55; }

/* The Briefing's limits table. What each limit caps is a sentence, and a
   sentence in a fifth column pushed the table past the width of the page, so
   the figures could only be reached by scrolling sideways. The sentence sits
   under the name it belongs to instead. The name column takes what is left
   after three narrow ones, so the prose wraps and the figures stay put. */
#pm-workspace .pm-limit-table { width: 100%; table-layout: auto; }
#pm-workspace .pm-limit-table td:first-child { width: 100%; }
#pm-workspace .pm-limit-table th:not(:first-child),
#pm-workspace .pm-limit-table td:not(:first-child) { white-space: nowrap; }
/* No size of its own either: it takes the table's, which is the size every
   other cell on the page is already set in. */
#pm-workspace .pm-limit-note {
  display: block;
  margin-top: 3px;
  max-width: 60ch;
  color: var(--text-muted);
  white-space: normal;
}
#pm-workspace .pm-limit-note:empty { display: none; }

/* ── Session overview dialog ───────────────────────────────────────────
   The shared dialog's wide shell, made the app's own (owner, 2026-10-07):
   a flat tile at a fixed size, no border and no radius, the way every
   panel on the desk is drawn. The header carries the mandate as the
   title, the session's facts under it and the section buttons beside it
   on the same rule; the body scrolls between that header and a footer
   with the one action. The sections are laid out in two columns, so the
   wide shell is used rather than filled with one long line, which is
   what the former 74ch cap on the shell existed to prevent.

   The dialog mounts on <body>, outside #pm-workspace, so nothing scoped
   to the workspace reaches it and every rule it needs is written here. */
.iro-dialog.pm-overview {
  width: min(1100px, 94vw);
  /* Fixed, so switching between a long section and a short one never
     moves the dialog; the body scrolls inside it. */
  height: 85vh;
  max-height: none;
  border: 0;
  border-radius: 0;
}
/* The title block, the section buttons and the close cross on one row.
   The buttons sit on the header's rule: their own nav rule is dropped and
   the selected underline, drawn 1px under the button, lands on the
   header's. */
.pm-overview .iro-dialog-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 0 32px;
  padding: 22px 28px 0;
  border-bottom: 1px solid var(--border);
}
.pm-ov-heading {
  min-width: 0;
  padding-bottom: 14px;
}
/* The caption size and colour of a desk frame head (.pm-frame-title). */
.pm-ov-eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.pm-overview .pm-ov-nav {
  margin: 0;
  border-bottom: 0;
  flex-wrap: nowrap;
}
.pm-overview .iro-dialog-close {
  align-self: start;
  margin-top: -6px;
}
.pm-overview .iro-dialog-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 28px 24px;
}

/* Numbers inside a line of words take the numeric face alone, the way the
   sidebar's rows set them; the words around them stay in the interface
   face. */
.pm-overview .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.pm-ov-update + .pm-ov-update { margin-top: 28px; }

/* The mandate's facts: one key-value row per fact on a hairline, the
   value right-aligned, in the idiom of the sidebar rows and the MM lobby
   card. */
.pm-ov-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: 24px;
  margin-bottom: 16px;
}
.pm-ov-row { display: contents; }
.pm-ov-row > * {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.pm-ov-label { color: var(--text-muted); }
.pm-ov-value {
  color: var(--text);
  font-weight: 600;
  text-align: right;
}

/* No table box: the rule under the headings and the row hairlines are
   the structure, as on the MM lobby card. The platform wrap keeps its
   horizontal scroll for a table wider than its column. */
.pm-backdrop-body .data-table-wrap {
  border: 0;
  border-radius: 0;
  margin-bottom: 12px;
}

/* ── A card holding a table or a feed, enlarged ─────────────────────────

   The enlarged state itself (.pm-card-max) is the last block of
   participant-shell.css, and the comment there says why it has to come
   after every card rule. These are the hedge fund desk's parts of it, last
   in this file for the same reason. */
/* An enlarged card fills the column it lives in, never the page. Each
   column states `position: relative` so `inset: 0` below is measured
   against the column. A column that omits it sends the card to
   #pm-workspace instead, which is the sidebar and both columns, and the
   card reads as a full-screen takeover. That is what the market grid did
   until 2026-08-11. */
#pm-workspace .pm-col-right,
#pm-workspace .pm-col-market { position: relative; }
/* On Performance & Risk an enlarged pane fills its column from the top of
   the grid to the bottom (owner, 2026-10-13). A pane placed in a named grid area
   measures `inset: 0` against that area, so the enlarged pane keeps the
   area's column and spans every row. */
#pm-workspace .pm-pr-grid { position: relative; }
#pm-workspace .pm-pr-grid > .pm-card-max { grid-row: 1 / -1; }
/* The selected-positions total is a footer, enlarged or not: the rule
   above stretches the card's body regions by their ids, and the total
   carries an id without being one of them. */
#pm-workspace .pm-card-max .pm-pos-agg {
  flex: 0 0 auto;
  overflow-y: visible;
}
/* A chart fills an enlarged pane and never scrolls in it. */
#pm-workspace .pm-card-max > .pm-pr-chart { overflow: hidden; }

/* ── Formula panel ─────────────────────────────────────────────────── */

/* The panel keeps the platform's 560px (owner, 2026-08-20; a 680px
   override once lived here and made every panel in the sim wider than
   the platform's). An identity too long for 518px of content wraps in
   its own definition instead: the P&L decomposition's numeric line
   stacks one term per line in pm_formulas.js, the same aligned form its
   factor split already uses. Do not widen the panel for a long formula. */

/* A variable whose value is a list rather than a number: the borrow tiers,
   the margin haircuts, the largest beta contributions. One reading per
   line, because a comma-separated run in a narrow column reads as one
   long string. */
.formula-var-table .formula-var-item { display: block; }