/* =====================================================================
   The participant shell, read by index.html, cm.html and pb.html. A change
   here reaches the hedge fund, Capital Markets and Prime Brokerage pages.

   The hedge fund app's shell is the shell of all three (the Capital Markets
   ruling of 2026-10-22, and the Prime Brokerage ruling of 2026-11-04 that
   takes the Capital Markets layout). This file has every rule of it that
   cm.html or pb.html can reach: the page tokens, the workspace and its
   one-viewport mode, the sidebar, the frames, the tables, the feed, the
   instrument panel rows, the panes and the segmented control, the Briefing
   document, the session overview dialog's sections, and the enlarged card.
   Each page loads it after participant-primitives.css. index.html loads
   portfolio-sim.css after it, which has the rules only the hedge fund desk
   reaches; cm.html loads cm-sim.css and pb.html loads cm-sim.css and
   pb-sim.css. The `pm-` prefix is the hedge fund app's (portfolio-sim.css
   says why).
   ===================================================================== */

/* ── Shell ─────────────────────────────────────────────────────────── */

/* Native controls follow the app's own theme, never the OS's. The theme
   toggle drives [data-theme]; without a root color-scheme the browser
   resolves the page's "dark light" meta against the OS preference, and a
   dark-OS machine drew dark checkboxes on the light theme (the positions
   tick column). The same pair console.css already carries. */
:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

/* The page tokens of the 2026-10 redesign (Claude Design handoff
   design_handoff_economy_charts, owner-approved 2026-10-11: the design
   wins on the look of the shell, Economy and Charts). Every colour
   carries a meaning, named here: selection, the day that is today, a
   print above or below its consensus, a chart's primary line, the
   consensus and the priced path, the policy rate, news, and the
   series identity of a chart with several lines. The ground, surfaces,
   borders, inks and the P&L pair stay base.css's own tokens. Plotly
   cannot read a custom property, so the charts read these through
   chart-config.js `cssVar`, which keeps this file the one source. */
:root {
  --pm-hover:       #1C232C;
  --pm-subtle:      #1e2229;
  --pm-track:       #252830;
  --pm-sel:         #1C2A3A;
  --pm-today-bg:    #14243a;
  --pm-above:       #f59e0b;
  --pm-below:       #38bdf8;
  --pm-line:        #818cf8;
  --pm-est:         #f59e0b;
  --pm-policy:      #38bdf8;
  --pm-policy-band: rgba(56, 189, 248, 0.18);
  --pm-news:        #f59e0b;
  --pm-grid:        rgba(255, 255, 255, 0.06);
  --pm-spike:       rgba(255, 255, 255, 0.25);
  --pm-meter:       #64748b;
  --pm-tip-bg:      #0D1117;
  --pm-series-1:    #818cf8;
  --pm-series-2:    #38bdf8;
  --pm-series-3:    #f472b6;
  --pm-series-4:    #a3e635;
  --pm-series-5:    #e879f9;
  --pm-series-6:    #2dd4bf;
}
[data-theme="light"] {
  --pm-hover:       #f4f6fa;
  --pm-subtle:      #e8ebf4;
  --pm-track:       #e8ebf4;
  --pm-sel:         #e3ecf6;
  --pm-today-bg:    #e3ecf6;
  --pm-above:       #B45309;
  --pm-below:       #0c7da3;
  --pm-line:        #4f52cc;
  --pm-est:         #B45309;
  --pm-policy:      #0c7da3;
  --pm-policy-band: rgba(12, 125, 163, 0.14);
  --pm-news:        #B45309;
  --pm-grid:        rgba(0, 0, 0, 0.08);
  --pm-spike:       rgba(0, 0, 0, 0.30);
  --pm-meter:       #94a3b8;
  --pm-tip-bg:      #ffffff;
  --pm-series-1:    #4f52cc;
  --pm-series-2:    #0c7da3;
  --pm-series-3:    #c0267a;
  --pm-series-4:    #4d7c0f;
  --pm-series-5:    #9333ea;
  --pm-series-6:    #0f766e;
}

/* The type sizes of the four redesigned pages (owner, 2026-10-11, after
   the design's 9.5 to 12px read too small): table rows, lists and
   buttons at the size these pages had before the redesign, notes,
   headings, titles, legends and chart axes one step under it, and only
   the labels of the number cards smaller. The values on the number
   cards keep their own larger sizes. */
:root {
  --pm-fs-main:  14px;
  --pm-fs-note:  13px;
  --pm-fs-label: 12px;
}

/* ── A tipped element ──────────────────────────────────────────────
   The shared JS tooltip answers over anything carrying data-tip; the
   question-mark cursor is the sign of it (owner, 2026-10-12, as on the
   market making setup sidebar). Page-wide here, rows and cards
   included. :where() gives the rule no specificity, so an element that
   sets the cursor its own action needs keeps it (the sortable position
   headings, the chart layers). Buttons, links and form fields are left
   out, so a control keeps the cursor of a control. */
:where([data-tip]:not([data-tip=""]):not(button, a, input, select, textarea)) {
  cursor: help;
}

#module-mount {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

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

#pm-workspace.pm-desk-active .workspace-content {
  overflow-y: hidden;
}
/* Every page's surround matches the sidebar's surface (owner, 2026-08-20):
   with the panels tiled flat, the page ground framing the slab read as a
   black border against the sidebar's grey beside it. Painted on the
   scroll container rather than the capped content area, so a monitor
   wider than the cap does not show the ground beyond the cap. The seams
   between panels keep the ground explicitly, on the tile containers. */
#pm-workspace .workspace-content { background: var(--bg-surface); }
#pm-workspace.pm-desk-active .tab-panel.active {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#pm-workspace.pm-desk-active .tab-content-area {
  flex: 1 1 0;
  min-height: 0;
  max-width: 1560px;   /* cap on wide monitors; the desk must stay dense */
  padding: 10px 16px 12px;
  display: flex;
  flex-direction: column;
}

/* ── Placeholder used by pages that are not built yet ──────────────── */

#pm-workspace .pm-placeholder {
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 10px 12px;
}

/* ── Header, right-hand controls ───────────────────────────────────── */

/* The controls group, the theme toggle and the button styles are
   participant-primitives.css's. The small button size is the console's .btn-sm
   (css/console.css), which only this header uses. */
#pm-header-controls .btn-sm { padding: 5px 10px; font-size: 12px; }

.pm-connect-error {
  max-width: 480px;
  margin: 80px auto;
  color: var(--negative);
  text-align: center;
}

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

/* The platform pads sidebar content through a list of module content ids
   (components.css :914-923). This app's id is not in that list, so the
   same declaration is repeated here rather than forking the copied
   stylesheet. Values are the platform's, unchanged. */
#pm-params-content {
  padding: 20px 16px;
  min-width: var(--sidebar-width);   /* prevents reflow during animation */
}

/* Key-value rows and the sub-line, copied from the platform's
   market-making sidebar (css/market-making.css .mkm-sb-row). */

#pm-params-content .pm-sb-desk {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.35;
}
/* The member names sit on the same line as the team name, after a plain
   hyphen: "Citadel - RvL". */
#pm-params-content .pm-sb-members {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 4px;
}
/* The team name is the rename control: a click puts an input in its place.
   It is drawn as the name and nothing else, so the sidebar reads as it did;
   the hover colour and the block's own tooltip are what say it can be
   clicked. */
#pm-params-content .pm-sb-name {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
#pm-params-content .pm-sb-name:hover { color: var(--color-accent); }
#pm-params-content .pm-sb-name:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
/* The editor takes the whole line, member names included, because the
   field needs the width of the sidebar to hold a team name. */
#pm-params-content .pm-sb-name-input { width: 100%; }
#pm-params-content .pm-sb-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  /* 2px, with the desk's density pass (2026-08-20): the sidebar is read
     beside the desk all session and follows its rhythm. */
  padding: 2px 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}
#pm-params-content .pm-sb-row .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}
#pm-params-content .pm-sb-row .num.positive { color: var(--positive); }
#pm-params-content .pm-sb-row .num.negative { color: var(--negative); }
/* The session line: the day, the pace and the connection on one line under
   the team name, spread across the sidebar's width. It replaces four rows
   of key and value, so the figures a desk reads all session start that
   much higher up. Each reading keeps its own tooltip. */
#pm-params-content .pm-sb-status {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  /* Three readings, each unbreakable: the day, the countdown to the next
     one, and the connection dot. The pace reading that used to sit here
     was what pushed the line onto a second row, and the countdown says
     the same thing live. The wrap stays as the last resort for a phone,
     where the sidebar is a fraction of the viewport. */
  flex-wrap: wrap;
  row-gap: 2px;
  margin-bottom: 4px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
#pm-params-content .pm-sb-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
#pm-params-content .pm-sb-stat-value { font-weight: 600; color: var(--text); }

/* A row that belongs to no block above it: the session overview control
   stands clear of the last section rather than reading as one more
   activity figure. The space is a heading's, so the break reads the same
   as the one between two sections. */
#pm-params-content .pm-sb-row--apart { margin-top: 18px; }

/* The dot on its own. The padding is the hover target its tooltip needs,
   an 8px circle being too small to find; the matching negative margin
   keeps it where it was on the line. */
#pm-params-content .pm-sb-conn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  margin: -5px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

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

/* The fallback the enlarged card is positioned against on a page with no
   column of its own. The rules for that state live at the very bottom of
   this file, and the comment there says why they have to. */
#pm-workspace { position: relative; }

/* Each region is a flat tiled panel (owner decision 2026-08-20, chosen on
   a rendered mockup against the earlier ALM-style rounded card). No border
   and no radius: the 1px grid gaps of the desk are the only separation, so the
   desk reads as one tiled surface rather than cards floating on a page.
   This supersedes the "cards, not terminal frames" ruling for the Trading
   Desk; the scrolling pages keep their cards until reviewed.

   The head is a caption bar rather than a card header: thin, on the
   elevated background, closed by a hairline. The title drops to 13px (a
   size the desk already uses) and the secondary text colour; the panel's
   working area is the content, and the bar only names it. These panels
   hold scrolling tables inside a fixed viewport, so the head carries the
   inset and the body runs to the panel's edge. */
#pm-workspace .pm-frame {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  overflow: hidden;
}
#pm-workspace .pm-frame-head {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 10px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
}
#pm-workspace .pm-frame-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
#pm-workspace .pm-frame-note {
  font-size: 0.75rem;
  color: var(--text-muted);
}

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

/* Fixed layout, so the columns are shared out rather than sized by their
   longest cell. Numbers keep their width and never truncate; the company and
   sector names give way with an ellipsis. Without this the table ran wider
   than its card and the last columns were cut off at the border. */
#pm-workspace .pm-market,
#pm-workspace .pm-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.85rem;
}
#pm-workspace .pm-market th,
#pm-workspace .pm-market td,
#pm-workspace .pm-table th,
#pm-workspace .pm-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The blotter and the resting orders both lead with a symbol, which needs
   far less room than the columns of figures beside it. */
#pm-workspace .pm-table th:first-child { width: 84px; }
#pm-workspace .pm-market th,
#pm-workspace .pm-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-surface);
  padding: 3px 10px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
#pm-workspace .pm-market th[data-sort],
#pm-workspace .pm-table th[data-sort] { cursor: pointer; }
#pm-workspace .pm-market td,
#pm-workspace .pm-table td {
  padding: 2px 10px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
#pm-workspace .pm-market th.right,
#pm-workspace .pm-market td.right,
#pm-workspace .pm-table th.right,
#pm-workspace .pm-table td.right { text-align: right; }
#pm-workspace .pm-market .num,
#pm-workspace .pm-table .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* The identifying column, the ticker or the name, carried by weight and
   colour rather than by size. */
#pm-workspace .pm-sym { font-weight: 600; color: var(--text); }
/* A quote cell that has just printed a new value. The background flash
   carries recency and nothing else; direction stays in the red and green
   of the text, so the two never compete (the AG Grid split: a neutral
   flash, then a fade). Without the transient, a change outside where the
   reader is looking is invisible. Engines without color-mix skip the
   flash rather than falling back to a wrong colour. */
@keyframes pm-tick-flash {
  0%, 35% { background: color-mix(in srgb, var(--text) 16%, transparent); }
  100% { background: transparent; }
}
#pm-workspace .pm-tick-flash { animation: pm-tick-flash 1.1s ease-out; }
@media (prefers-reduced-motion: reduce) {
  #pm-workspace .pm-tick-flash { animation: none; }
}
#pm-workspace tr.pm-row-selected .pm-sym { color: var(--color-accent-text); }
#pm-workspace .positive { color: var(--positive); }
#pm-workspace .negative { color: var(--negative); }

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

#pm-workspace .pm-field { display: block; }
#pm-workspace .pm-field .sb-label { margin: 0 0 4px; }

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

#pm-workspace .pm-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
}
/* The resting-orders box takes its natural height inside an `auto` grid row,
   so its scroller must not stretch: `flex: 1 1 0` there resolves to zero and
   the frame's overflow:hidden then clips the table away entirely. A hedge
   fund desk rule, kept in this file because the enlarged card at the end of
   it must override it. */
#pm-workspace .pm-orders-frame .pm-scroll {
  flex: 0 1 auto;
  max-height: 160px;
}

/* Feed, copied from the market-making desk (.mkm-feed). */
#pm-workspace .pm-feed {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0;
}
#pm-workspace .pm-feed-item {
  display: flex;
  gap: 10px;
  padding: 2px 10px;
  font-size: 0.85rem;
  line-height: 1.5;
}
#pm-workspace .pm-feed-day {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 34px;
  text-align: right;
}
/* The thread filter in the feed's caption bar, kept to the bar's height.
   The bar clears the enlarge button on its right, as the positions bar
   does. */
#pm-workspace .pm-feed-frame .pm-frame-head {
  align-items: center;
  padding-right: 40px;
}
#pm-workspace .pm-feed-text { color: var(--text-secondary); }
/* The calendar's next releases above the headlines: the feed's own rows,
   closed off from the headlines by a hairline. */
#pm-workspace .pm-feed-next {
  flex-shrink: 0;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
#pm-workspace .pm-feed-next-numbers,
#pm-workspace .pm-feed-next-thread { color: var(--text-muted); }
#pm-workspace .pm-feed-item--news .pm-feed-text {
  color: var(--text);
  font-weight: 600;
}

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

/* The platform's table wrap rounds its corners (components.css
   .data-table-wrap, --r-lg); square in this app's terminal chrome. The
   border stays: a table inside a padded card still needs its edge. The
   session-overview dialog mounts outside #pm-workspace and draws its
   tables without a box; its own block below owns that. */
#pm-workspace .data-table-wrap {
  border-radius: 0;
}

/* The limit meter, copied from the platform's market-making desk
   (css/market-making.css .mkm-meter), which is where the platform shows a
   position against its limit. */
#pm-workspace .pm-meter {
  height: 5px;
  border-radius: 3px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  overflow: hidden;
  margin: 2px 0 6px;
}
/* Neutral at rest (owner decision 2026-08-20, the colour-discipline
   pass): saturated colour is reserved for the warn and breach bands, so
   an amber or red bar is the only warm thing on a healthy screen. The
   accent fill this replaced said nothing at any usage. */
#pm-workspace .pm-meter-fill {
  height: 100%;
  background: var(--neutral);
}
/* Three bands, in the order a desk meets them: inside the cap, inside the
   last 15% of it, past it. The fill is the only thing that carries the
   colour, so a row at rest is as quiet as every other row. */
#pm-workspace .pm-meter--warn .pm-meter-fill { background: var(--warning); }
#pm-workspace .pm-meter--breach .pm-meter-fill { background: var(--negative); }
/* ── Instrument panel ──────────────────────────────────────────────── */

/* Two columns, so the panel is read at a glance rather than scrolled. */
#pm-workspace .pm-ip-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
  margin-top: 2px;
}
/* A value that reads as a word rather than a figure. */
#pm-workspace .pm-ip-row .pm-ip-word {
  font-weight: 600;
  color: var(--text);
  text-align: right;
}
#pm-workspace .pm-ip-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 2px 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
#pm-workspace .pm-ip-row .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}
#pm-workspace .pm-ip-row .num.positive { color: var(--positive); }
#pm-workspace .pm-ip-row .num.negative { color: var(--negative); }
#pm-workspace .pm-ip-headline {
  display: flex;
  gap: 8px;
  padding: 2px 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
#pm-workspace .pm-ip-day { color: var(--text-muted); flex: 0 0 auto; }

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

/* The button hangs in the frame's own top-right corner, level with its
   title. The canonical rule anchors it top-left (components.css :2719),
   which lands it on the y-axis labels; overriding the anchor when a frame
   carries a title is the platform's own precedent for that, in futures.css
   .fut-mtm-fs-btn and the lifecycle map. */
#pm-workspace .pm-frame > .chart-fullscreen-btn {
  top: 12px;
  right: 12px;
  left: auto;
}
/* The enlarge button on the positions card anchors to the card, so the
   card is what it is positioned against. */
#pm-workspace .pm-frame { position: relative; }
#pm-workspace .pm-frame > .chart-fullscreen-btn {
  width: 22px;
  height: 22px;
  /* Centred on the caption bar: the bar runs about 28px tall since the
     2026-08-20 chrome pass, so 3px centres a 22px button on it. */
  top: 3px;
  right: 10px;
  z-index: 2;
}

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

/* A table row is one line high. A cell too narrow for its text cuts the
   text short instead of wrapping it over the next row (owner,
   2026-10-11). */
#pm-workspace :is(.pm-ec-row, .pm-ec-hrow, .pm-ec-irow, .pm-ec-rrow, .pm-ec-crow,
                  .pm-ec-urow, .pm-pr-frow, .pm-pr-limrow, .pm-pr-brow,
                  .pm-pr-trow, .pm-pr-nrow, .pm-db-srow, .pm-db-wrow, .pm-db-lrow,
                  .pm-db-mrow, .pm-db-irow, .pm-db-trow, .pm-db-crow) > * {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A pane: the surface, a hairline border, square corners. */
#pm-workspace .pm-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
#pm-workspace .pm-pane .num,
#pm-workspace .pm-subtabs .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
#pm-workspace .pm-pane .right { text-align: right; }

/* The design's segmented control. */
#pm-workspace .pm-seg {
  display: inline-flex;
  gap: 2px;
  padding: 1px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
}
#pm-workspace .pm-seg-opt {
  padding: 1px 8px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: var(--pm-fs-main);
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
}
#pm-workspace .pm-seg-opt:hover { color: var(--text); }
#pm-workspace .pm-seg-opt.is-active { background: var(--color-accent); color: #fff; }

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

#pm-workspace .pm-ec-key {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#pm-workspace .pm-ec-swatch {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 1px;
}
#pm-workspace .pm-ec-legend {
  flex: none;
  display: flex;
  gap: 12px;
  padding: 6px 10px 0;
  font-size: var(--pm-fs-note);
  color: var(--text-muted);
  white-space: nowrap;
}
#pm-workspace .pm-ec-legend i { display: inline-block; }

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

#pm-workspace .ref-mech-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 62rem);
  gap: 32px;
  align-items: start;
  justify-content: center;
  margin: 0 auto;
}
/* The reading measure caps the prose itself rather than the column, so a
   table that genuinely needs more room can opt out of it. Same split
   `.learn-chapter-body` uses on the platform. */
#pm-workspace .ref-mechanics > p,
#pm-workspace .ref-mechanics > .doc-part,
#pm-workspace .ref-mechanics > .ref-section,
#pm-workspace .doc-param-body p {
  max-width: var(--measure-prose, 46rem);
}
/* Tables read at the same measure by default. A table of three short
   columns stretched across the full column put yawning space between a
   label and its number. The global `thead th { white-space: nowrap }` is
   what forces a table past a cap, so headers wrap here and the columns
   shrink to their content, exactly as the handbook does it. Tables that
   need the room opt out with `data-table-wide`. */
/* A table is a block in the prose, so it gets the same air above and below
   that the handbook gives one. Neither `.data-table-wrap` nor a bare
   `.data-table` carries a margin of its own, so the paragraph after a table
   sat flush against it. */
#pm-workspace .ref-mechanics .data-table-wrap,
#pm-workspace .ref-mechanics .pm-limit-table {
  max-width: var(--measure-prose, 46rem);
  margin: var(--space-subsection, 32px) 0;
}
#pm-workspace .ref-mechanics .data-table { table-layout: auto; }
#pm-workspace .ref-mechanics .data-table thead th { white-space: normal; }
/* The chapter index, on the platform handbook's own `.learn-nav` model: a
   quiet group label per chapter, and rows that carry the reading position
   through weight and colour rather than a filled block. The grey pill this
   page used read as a UI control sitting in a document. */
#pm-workspace .ref-toc {
  position: sticky;
  top: 8px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 8px;
  padding-bottom: 40px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  /* Section numbering by CSS counter, so adding or removing a section
     renumbers the index without touching the markup. */
  counter-reset: ref-section;
}
/* A number column and a title column, so a title that wraps hangs under
   itself rather than under its own number. */
#pm-workspace .ref-toc-link {
  display: grid;
  grid-template-columns: 2.2em 1fr;
  align-items: baseline;
  gap: 6px;
  padding: 7px 10px 7px 6px;
  border-radius: 4px;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
  counter-increment: ref-section;
}
#pm-workspace .ref-toc-link::before {
  content: counter(ref-section) ".";
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  text-align: right;
  padding-right: 4px;
}
#pm-workspace .ref-toc-link:hover {
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
#pm-workspace .ref-toc-link:hover::before { color: var(--text-secondary); }
#pm-workspace .ref-toc-link.active {
  color: var(--text);
  font-weight: 600;
  background: transparent;
}
/* The number is the only ink marker on the active row. */
#pm-workspace .ref-toc-link.active::before {
  color: var(--color-accent);
  font-weight: 600;
}
#pm-workspace .ref-mech-layout .ref-mechanics .ref-section,
#pm-workspace .ref-mech-layout .ref-mechanics .doc-part { scroll-margin-top: 16px; }
@media (max-width: 900px) {
  #pm-workspace .ref-mech-layout { grid-template-columns: 1fr; }
  #pm-workspace .ref-toc { display: none; }
}
/* Reading type, not UI type: the same body size and leading the platform's
   handbook chapters use, from the tokens base.css already carries. */
#pm-workspace .ref-mechanics {
  font-size: var(--text-body);
  line-height: var(--line-body);
  color: var(--text);
}
#pm-workspace .ref-mechanics p { margin: 0 0 var(--space-block, 16px); }
/* On the platform's typography scale, so a section heading sits above the
   18px body rather than under it. Chapter at h2, section at h3. */
#pm-workspace .ref-mechanics .ref-section {
  margin: 36px 0 10px;
  font-size: var(--text-h3);
  line-height: var(--line-tight);
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
#pm-workspace .doc-part {
  font-size: var(--text-h2);
  line-height: var(--line-tight);
  font-weight: 700;
  margin: 48px 0 4px;
  color: var(--text);
}
#pm-workspace .doc-part:first-child { margin-top: 0; }

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

/* Below 1024px the hedge fund desk gives way to a notice (portfolio-sim.css,
   Desktop-only notice), and the workspace in its one-viewport mode scrolls
   again. */
@media (max-width: 1023px) {
  #pm-workspace.pm-desk-active .workspace-content { overflow-y: auto; }
}

/* The read-only bar a trainer gets when they open a desk from Room Control.
   What sits below it is the desk's own screen, ticket and all, so without
   the bar it reads as a book that can be traded. Copied from the Bank ALM
   sim's observer banner, which is where the platform already answers this. */
#pm-observer-banner {
  flex: 0 0 auto;
  background: #f8d7da;
  color: #1a1a1a;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 7px 16px;
}

/* ── 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. */
/* The platform's h3 step, the size the MM lobby card gives its title. */
.pm-ov-title {
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
}
.pm-ov-subtitle {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.pm-ov-footer {
  flex: none;
  display: flex;
  gap: 10px;
  padding: 14px 28px;
  border-top: 1px solid var(--border);
}
.iro-dialog-body p { margin: 0 0 12px; }
.iro-dialog-body p:last-child { margin-bottom: 0; }

/* A section heading inside the body, in the frame-head caption style. */
.pm-ov-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 8px;
}
.pm-ov-col > .pm-ov-head:not(:first-child) { margin-top: 20px; }

/* Two columns, equal, the prose on the left at a reading measure and the
   tables on the right. */
.pm-ov-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 40px;
  align-items: start;
}
.pm-ov-col { min-width: 0; }
.pm-ov-prose,
.pm-ov-col > p { max-width: 66ch; }
/* A table in a half column wraps its words rather than scrolling
   sideways. The platform table sets every cell nowrap, and the macro
   backdrop's economies table (six columns, headed "Priced over the next
   year") measures about 760px that way against a column of about 500px.
   Headings and text cells wrap; a printed number never does. */
.pm-ov-col .data-table thead th,
.pm-ov-col .data-table tbody td:not(.num) { white-space: normal; }

@media (max-width: 900px) {
  .pm-ov-cols { grid-template-columns: minmax(0, 1fr); }
}

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

   A card is laid over the column it already lives in, not over the page.
   On the desk that means the right-hand column: the four cards there are
   the ones with no natural end, and enlarging one gives it the room the
   other three were using while the market grid and the ticket beside it
   stay put and keep working. Covering the whole desk to read the book would
   take the prices away at the same time.

   What it fills is decided by the nearest positioned ancestor, so the
   column below is what makes it the column rather than the page. Portfolio
   Analytics has no such column, so its cards fall back to `#pm-workspace`
   and fill the page, which is right for a card that is already the width of
   the page.

   THIS BLOCK MUST STAY LAST IN THE FILE. Enlarging a card overrides the
   normal sizing of whichever card it is, and those rules are written per
   card further up with the same specificity as these. Three of them had
   overtaken this state by sitting later in the file. The fatal one was
   `#pm-workspace .pm-frame { position: relative }`, added to anchor the
   enlarge button to its card corner: same weight as the rule below, later
   in the file, so `position: absolute` lost, `inset: 0` did nothing, and
   the card stayed exactly where it was. The button appeared dead. Do not
   fix a future collision by adding an id or an !important here; keep this
   block at the bottom, where the state that overrides everything belongs.

   portfolio-sim.css loads after this file on index.html, so a hedge fund
   card rule there with the same weight as these, on a property these set,
   overrides the enlarged state. None does: the one that did,
   `.pm-orders-frame .pm-scroll`, is in this file above, and the rest of
   the enlarged state the hedge fund desk needs is at the end of
   portfolio-sim.css. A new card rule that sizes a card belongs here, above
   this block. */
#pm-workspace .pm-card-max {
  position: absolute;
  inset: 0;
  z-index: 6;
  margin: 0;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
}
/* Whatever height the card normally states gives way, and its body fills
   what it has been given. */
#pm-workspace .pm-card-max .pm-instrument,
#pm-workspace .pm-card-max .pm-scroll,
#pm-workspace .pm-card-max .pm-feed,
#pm-workspace .pm-card-max .pm-market-wrap,
#pm-workspace .pm-card-max > [id] {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}