/*
 * Transactions tab -- the activity ledger.
 *
 * Positions is an inventory: a finite set of holdings, one row each, and a
 * table is the right shape for it. Transactions is a stream of events, and
 * the question a reader brings to it is "what happened, and when?". So this
 * page is a chronological ledger: the date is a heading said once, and the
 * transactions that share it sit beneath it.
 *
 * Still dense, and still one line per transaction. Grouping by date replaced
 * a column that repeated itself on every row; it did not license turning
 * each transaction into a card.
 *
 * What is left of the table is alignment. There is no column header row, no
 * rule between rows and no placeholder in an empty cell: the date headings
 * carry the structure, and a row reads as one line --
 *
 *     [type]   [security or note]                        [amount]
 *
 * -- indented under the date it belongs to, the way a child item sits under
 * its parent in a file tree. The security is drawn by `holding_identity`,
 * the macro the Positions table and Today's Movers already share, so a
 * ticker is presented identically wherever it appears in the product.
 *
 * Everything visual is the portfolio page's own -- the `.pop2-card` ground,
 * `--bg-card-soft`, `--border-subtle`/`--border-card`, the `--space-*` scale,
 * `--accent-green`/`--accent-red`, and the `.pop2-logo` badge. This file adds
 * the ledger's own chrome and nothing else: the date headings, the type
 * indicator, the row grid a phone uses, the filter bar and the pagination
 * strip.
 */

/* ── The ledger's Bootstrap table, repainted ───────────────────────────
 *
 * The activity table predates the dark portfolio theme and still carries
 * Bootstrap/Corporate-UI classes. Rather than rewrite its markup, these
 * rules push the page's own tokens into it.
 */

#pop2TradesBody {
  /* Type colours, in one place. A transaction type is a category, not a
     gain or a loss, so every type is one neutral tone (Messaging §9b; founder
     2026-10-07, A37 Q5; design guide, Semantic insight color: transaction
     types are neutral slate). Dividend included: its blue was the last hue
     left on the ledger (C30). The word says which type it is, so nothing
     depends on telling colours apart. */
  --tx-buy:        var(--tx-neutral);
  --tx-sell:       var(--tx-neutral);
  --tx-deposit:    var(--tx-neutral);
  --tx-withdrawal: var(--tx-neutral);
  --tx-fee:        var(--tx-neutral);
  --tx-dividend:   var(--tx-neutral);
  --tx-neutral:    var(--neutral-light);
}

#pop2TradesBody .card,
#pop2TradesBody .card-header,
#pop2TradesBody .card-body {
  background: transparent !important;
  color: var(--text-secondary);
}
#pop2TradesBody .card {
  border-color: transparent !important;
  box-shadow: none !important;
}
#pop2TradesBody .card-header {
  border-bottom-color: var(--border-subtle) !important;
}
#pop2TradesBody .bg-light {
  background: var(--bg-card-soft) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-card) !important;
}

#pop2TradesBody #tradesTable {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-secondary);
  --bs-table-border-color: var(--border-subtle);
  margin-bottom: 0;
  width: 100%;
}
#pop2TradesBody #tradesTable tbody td {
  background: transparent !important;
  color: var(--text-secondary) !important;
  /* No rule between rows. A hairline under every one is what still made this
     read as a spreadsheet; the only divider left on the page is the one that
     opens a new day. Rows are separated by their own height, and the hover
     tint is what picks one out. */
  border: 0 !important;
  padding: 4px var(--space-md);
  vertical-align: middle;
  font-size: 0.82rem;
  line-height: 1.25;
}

/* One height for every row, whether or not it carries a logo badge. `height`
   on a table cell is a minimum, so this is a floor rather than a clamp: a row
   with unusually long content still grows. Uniform matters here because a
   ledger broken into days is read as a rhythm, and a stagger between rows
   with a security and rows without one breaks it. 42px keeps a couple of
   pixels of breathing room above the 39px badge floor -- the badge is
   Positions' size and cannot shrink here without shrinking there too -- while
   tightening the previous 47px enough to fit noticeably more of the ledger in
   one screen. */
#pop2TradesBody #tradesTable tbody tr[data-id] > td {
  height: 42px;
}

/* The indent. Transactions sit under their date the way a child item sits
   under its parent, which is the whole reason the date reads as a heading
   rather than as another row. Small on purpose: enough for the eye to see
   the nesting, not enough to cost the row real width. */
#pop2TradesBody #tradesTable tbody td.tx-col-type {
  padding-left: calc(var(--card-pad-x) + 20px);
}
#pop2TradesBody #tradesTable tbody td.tx-col-amount {
  padding-right: var(--card-pad-x);
}
#pop2TradesBody #tradesTable tbody tr[data-id]:hover td {
  background: rgba(255, 255, 255, 0.035) !important;
}

/* ── Date headings ──────────────────────────────────────────────────────
 *
 * The spine of the page, and the thing the eye should land on first when it
 * scans down. Each one opens a section rather than sitting in one: a rule
 * across the full width above it, generous air above and very little below,
 * a step up in size and weight, and the page's brightest text colour against
 * rows that are one step back.
 *
 * Lightweight on purpose -- a rule, a size and a colour. No band of fill, no
 * card, no chevron, and no collapse: every group is always open, and nothing
 * here should read as a control.
 */
#pop2TradesBody #tradesTable tbody tr.tx-group,
#pop2TradesBody #tradesTable tbody tr.tx-group:hover th {
  background: transparent !important;
}

#pop2TradesBody #tradesTable tbody .tx-group__cell {
  /* Roughly four parts above to one below, so the heading is unmistakably
     attached to the rows beneath it rather than floating between two groups.
     The rule sits at the top of that space, which is what turns the gap into
     a section break instead of padding. Trimmed from 20px in the desktop
     density pass -- the per-row height (42px, already at its floor for the
     39px logo badge) stays untouched, so this is where a modestly denser
     page comes from instead. */
  padding: 16px var(--card-pad-x) 3px;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
  text-transform: none;
  text-align: left;
  white-space: nowrap;
  border-top: 1px solid var(--border-card);
}

/* The first heading on a page opens the card itself -- there is nothing above
   it to be divided from, and no gap to leave. */
#pop2TradesBody #tradesTable tbody .tx-group--first .tx-group__cell {
  padding-top: 12px;
  border-top: 0;
}

/* ── Type ───────────────────────────────────────────────────────────────
 *
 * A dot in the type's colour with the word beside it. This used to be an
 * outlined pill on every row, which on a page that is mostly types made the
 * types the loudest thing on it. The dot gives the column a rail to scan
 * down at a glance; the word is what says which type it is, so nothing here
 * depends on distinguishing the colours.
 */
#pop2TradesBody .tx-type {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tx-type-color, var(--text-secondary));
  font-weight: var(--fw-semibold);
  font-size: 0.8rem;
  line-height: 1.2;
  white-space: nowrap;
}
#pop2TradesBody .tx-type::before {
  /* The dot is the only chrome a type gets. It is also what lines the types
     up as a column without a rule drawing one. */
  opacity: 0.95;
}
#pop2TradesBody .tx-type::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
#pop2TradesBody .tx-type--buy        { --tx-type-color: var(--tx-buy); }
#pop2TradesBody .tx-type--sell       { --tx-type-color: var(--tx-sell); }
#pop2TradesBody .tx-type--deposit    { --tx-type-color: var(--tx-deposit); }
#pop2TradesBody .tx-type--withdrawal { --tx-type-color: var(--tx-withdrawal); }
#pop2TradesBody .tx-type--fee        { --tx-type-color: var(--tx-fee); }
#pop2TradesBody .tx-type--dividend   { --tx-type-color: var(--tx-dividend); }
#pop2TradesBody .tx-type--neutral    { --tx-type-color: var(--tx-neutral); }

/* ── The security ───────────────────────────────────────────────────────
 *
 * Not styled here. `holding_identity` (portfolios/holding_identity.html)
 * draws the logo badge, the ticker and the company name, and its look lives
 * in snapshot-analytics.css and portfolio.html -- the same rules the
 * Positions table and Today's Movers resolve against. A ticker therefore
 * looks identical on all three pages, and can only change on all three at
 * once.
 *
 * All this adds is the link around it. The link inherits everything and
 * underlines the ticker alone on hover, so the presentation is unchanged by
 * being navigable.
 */
#pop2TradesBody .tx-security {
  /* `block`, not `inline-block`: an inline-block sits on a text baseline and
     reserves descender space under it, which made rows carrying a security
     5px taller than rows without one and put a stagger through the ledger's
     rhythm. */
  display: block;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}
#pop2TradesBody .tx-security:hover .snapshot-holding-identity__text .fw-bold,
#pop2TradesBody .tx-security:focus-visible .snapshot-holding-identity__text .fw-bold {
  text-decoration: underline;
}
/* The ticker at the Positions table's own body size, since the cell around
   it here is a step smaller than that table's. */
#pop2TradesBody .tx-security .snapshot-holding-identity__text .fw-bold {
  font-size: var(--fs-body);
  color: var(--text-primary);
}

/* When the transaction moves cash rather than touching a security, the same
   slot names what it moved -- "Cash deposit", "Account fee". It sits exactly
   where a ticker would, so every row answers the same question in the same
   place. */
#pop2TradesBody .tx-subject-label {
  display: block;
  color: var(--text-secondary);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A security that should be there and is not. Muted, because it is the
   absence of a name rather than a name -- and stated, because silently
   showing a dividend with no security would read as a plain deposit. */
#pop2TradesBody .tx-subject-label--unresolved {
  color: var(--text-muted);
  font-style: italic;
}

/* ── Amount ─────────────────────────────────────────────────────────────
 *
 * "5 @ $872.60" for a trade, "$5,000.00" for a cash movement, "$1.00 / sh"
 * for a dividend -- one field where Quantity and Price used to be two, which
 * is the same information in about half the width and, on the rows where
 * neither applied, two em dashes fewer. Right-aligned against the card's
 * edge, which is what lets the eye run down the figures without a rule.
 */
#pop2TradesBody #tradesTable tbody td.tx-col-amount {
  text-align: right;
  white-space: nowrap;
}
#pop2TradesBody .tx-amount-value {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
}
/* The qualifier a row carries when its middle slot is already taken by a
   security -- a dividend's share count, a split's ratio. Quiet, and under
   the figure it qualifies. */
#pop2TradesBody .tx-amount-note {
  display: block;
  margin-top: 1px;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

/* Widths: the type is the only fixed column, because it is the one the eye
   uses as a rail. The security takes the slack and the amount takes what it
   needs at the far edge. Nothing else is pinned -- there are no columns left
   to keep rigid. */
#pop2TradesBody #tradesTable .tx-col-type { width: 9rem; }
#pop2TradesBody #tradesTable .tx-col-amount { width: 1%; }

/*
 * Desktop composition: a data row becomes a grid (the same technique the
 * mobile layout below already uses to hold [type][subject][amount] in
 * place -- just with desktop-appropriate proportions) so the identity and
 * the amount read as one related group instead of stretching to opposite
 * edges of a wide card. Native table auto-layout has no way to cap only
 * the middle column's width without also narrowing the date heading's own
 * `<th colspan="3">` row, which is a real table row and intentionally
 * stays full width for its section-divider rule (see "Date headings"
 * above) -- untouched by this.
 *
 * Both the identity and amount columns are capped to their own realistic
 * content widths -- neither is `auto`/unbounded. An unconstrained track
 * (this one shipped with the amount column as plain `auto`) has no growth
 * limit once nothing on the row is a flexible `fr` track, so CSS grid's
 * "maximize tracks" step hands it *all* the row's leftover width instead
 * of just what its own text needs, recreating the exact far-edge-stranding
 * bug this grid exists to fix. `minmax(0, 280px)` comfortably fits a
 * two-line identity ("The Procter & Gamble Company" beside its badge)
 * without leaving hundreds of pixels of dead space inside the column for
 * shorter names; `.snapshot-company-name`'s existing ellipsis handles the
 * rare longer one. `minmax(90px, 150px)` is sized for the longest amount
 * strings this column renders ("1,000 @ $9,999.99"). Any width the row
 * still doesn't use is left as trailing space after the amount column,
 * which reads as a wide card's normal right margin rather than a gap
 * between related content.
 */
@media (min-width: 768px) {
  #pop2TradesBody #tradesTable tbody tr[data-id] {
    display: grid;
    grid-template-columns: 9rem minmax(0, 280px) minmax(90px, 150px);
    align-items: center;
    column-gap: 20px;
    padding-left: calc(var(--card-pad-x) + 20px);
    padding-right: var(--card-pad-x);
  }
  #pop2TradesBody #tradesTable tbody tr[data-id] > td {
    display: block;
    padding: 4px 0;
    width: auto;
  }
}

/* ── Filter bar ─────────────────────────────────────────────────────────
 *
 * Filtering matters more here than anywhere else on the page: nobody pages
 * through a thousand-row ledger by hand. So the controls get their own band
 * above the table -- a faint ground and a hairline -- rather than floating
 * on the same surface as the rows.
 *
 * Two groups now: the type segmented control, and the date range with its
 * reset. The sort buttons are gone with the flat table; ordering is date
 * descending and only date descending, because that is the order the date
 * headings are read in.
 */

/* The filter band is always the first thing in the card now -- the
   visibility badge that used to sit above it as its own header row is gone
   (folded into this row's own trailing edge, and only for the two exception
   states; see table.html). */
#pop2TradesBody .activity-filters {
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: var(--space-sm) var(--space-md);
}

/* A light overlay like the app's .pop2-btn, not the page colour: a fill
   darker than the card read as a hole once the card was lifted (C44). */
#pop2TradesBody .form-control,
#pop2TradesBody .form-select {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--border-card) !important;
  color: var(--text-secondary) !important;
  border-radius: 999px !important;
}
/* The list a browser draws itself (Chrome on Windows) takes the select's
   fill; a translucent one would sit on white under light text. */
#pop2TradesBody .form-select option {
  background-color: var(--ss-card);
  color: var(--ss-text);
}
/* Focus is the page's one purple ring (an outline, portfolio.html), not the
   green glow these inputs had: green is for figures only (A63). */
#pop2TradesBody .form-control:focus,
#pop2TradesBody .form-select:focus {
  border-color: rgba(148, 163, 184, 0.55) !important;
  box-shadow: none !important;
}

/* Same pill segmented-control language as Allocation/Risk's mode toggles
   (.snapshot-analytics-segmented / -segment-btn) -- individually spaced
   pills rather than a joined Bootstrap .btn-group, so the filter row reads
   as SharpeShare's own control rather than a generic utility bar. */
#pop2TradesBody .tx-type-segmented {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
  /* The five type pills are wider than a phone; the strip scrolls rather
     than wrapping mid-control, without a scrollbar of its own. */
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#pop2TradesBody .tx-type-segmented::-webkit-scrollbar {
  display: none;
}
#pop2TradesBody .tx-type-segment-btn {
  flex-shrink: 0;
  border: 1px solid var(--border-card);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 999px;
  font-size: 0.78rem;
  /* 400, not 500: Nunito is loaded at 400/600/700 only, so 500 always drew
     as 400. The active pill's 600 is what marks it. */
  font-weight: var(--fw-regular, 400);
  line-height: 1;
  padding: 0 12px;
  min-height: 34px;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
#pop2TradesBody .tx-type-segment-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: var(--border-card);
}
#pop2TradesBody .tx-type-segment-btn.active {
  background: var(--ss-active-fill, rgba(111, 66, 193, 0.45));
  color: #ffffff;
  border-color: var(--ss-active-line, #a98ff8);
  font-weight: var(--fw-semibold);
}
/* The page's one focus ring (portfolio.html). Inset on the type pills: their
   strip scrolls sideways, so it clips anything drawn outside a pill. */
#pop2TradesBody .tx-type-segment-btn:focus-visible {
  outline: 2px solid var(--ss-focus-ring);
  outline-offset: -2px;
}
#pop2TradesBody .page-link:focus-visible,
#pop2TradesBody .tx-pagesize__select:focus-visible,
#pop2TradesBody .tx-security:focus-visible {
  outline: 2px solid var(--ss-focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

/* A comfortable target everywhere, phone included. */
#pop2TradesBody .activity-filters .form-control {
  min-height: 34px;
}

#pop2TradesBody .activity-visibility-note {
  margin-left: auto;
  opacity: 0.85;
}
#pop2TradesBody .activity-visibility-note .badge {
  font-size: 0.72rem;
}

#pop2TradesBody .tx-filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

#pop2TradesBody .tx-filter-label {
  color: var(--text-muted);
  font-size: var(--fs-small);
  white-space: nowrap;
}

/* ── Scroll frame ───────────────────────────────────────────────────────
 *
 * Four columns fit a phone, so this is now a backstop rather than a layout:
 * the only thing that can make the ledger wider than its card is an unusually
 * long memo. `.tx-scroll` is the scrollport; `.tx-scroll-frame` exists so the
 * right-edge fade has something to hang off that does not itself scroll.
 * The pagination strip lives outside both.
 */

.tx-scroll-frame {
  position: relative;
}

#pop2TradesBody .tx-scroll {
  /* Horizontal only. The page owns vertical scrolling -- no height, no
     min-height: the table is as tall as the rows on the current page, the
     card ends where the table ends, and the footer follows the card. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* If the scrollport can scroll, a keyboard user has to be able to reach it;
   the script removes the tab stop again when it cannot. The outline is drawn
   inside so the card's own `overflow: clip` cannot cut it. */
#pop2TradesBody .tx-scroll:focus-visible {
  outline: 2px solid var(--ss-focus-ring);
  outline-offset: -2px;
}

/*
 * The right-edge fade, for the overflow case only. It goes as the far-right
 * edge is reached -- a fade that is always on stops meaning "there is more".
 * `is-scrollable` / `is-at-end` are set by the ledger script; with no script
 * the fade never appears and scrolling still works.
 *
 * The stop colour is the card (`--ss-card`, #16243d) written out as channels,
 * because a gradient to `transparent` interpolates through transparent
 * *black* and greys the rows on the way. Change it with the token.
 */
.tx-scroll-frame::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 56px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  background: linear-gradient(
    to right,
    rgba(22, 36, 61, 0) 0%,
    rgba(22, 36, 61, 0.55) 34%,
    rgba(22, 36, 61, 0.92) 72%,
    rgba(22, 36, 61, 1) 100%
  );
}

.tx-scroll-frame.is-scrollable:not(.is-at-end)::after {
  opacity: 1;
}

/* ── Pagination strip ───────────────────────────────────────────────────
 *
 * Page controls centred, rows-per-page beside them. Both sit directly under
 * the last row: nothing stretches the card to reach the bottom of the
 * viewport, so a short page ends where its rows end.
 */

#pop2TradesBody .tx-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-md);
  border-top: 1px solid var(--border-subtle);
}

#pop2TradesBody .tx-pagination__nav {
  /* Takes the middle and lets the rows-per-page control sit at the end,
     so the page numbers stay centred in the card rather than being pushed
     left by it. */
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

#pop2TradesBody #paginationControls {
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0;
}

#pop2TradesBody .pagination {
  --bs-pagination-color: var(--text-secondary);
  --bs-pagination-bg: rgba(255, 255, 255, 0.04);
  --bs-pagination-border-color: var(--border-card);
  --bs-pagination-hover-color: var(--text-primary);
  --bs-pagination-hover-bg: rgba(255, 255, 255, 0.08);
  --bs-pagination-hover-border-color: rgba(148, 163, 184, 0.4);
  --bs-pagination-focus-color: var(--text-primary);
  --bs-pagination-focus-bg: rgba(255, 255, 255, 0.08);
  /* Focus is the outline ring above, not a second ring in box-shadow. */
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: #ffffff;
  --bs-pagination-active-bg: var(--ss-active-fill);
  --bs-pagination-active-border-color: var(--ss-active-line);
  --bs-pagination-disabled-color: var(--text-muted);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: rgba(148, 163, 184, 0.18);
}
#pop2TradesBody .page-link {
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1;
  min-width: 38px;
  min-height: 34px;
  text-align: center;
}
/* The theme paints every `.page-item .page-link` #64748b over the colours
   above (3.8:1 on the card, 2.6:1 on the active fill), so each state names
   its colour again at the ledger's own weight. */
#pop2TradesBody .page-item .page-link {
  color: var(--bs-pagination-color);
}
#pop2TradesBody .page-item .page-link:hover {
  color: var(--bs-pagination-hover-color);
}
#pop2TradesBody .page-item.active .page-link {
  color: var(--bs-pagination-active-color);
  border-color: var(--bs-pagination-active-border-color);
  font-weight: 700;
}
/* Disabled reads as disabled -- dimmer text, and no fill under it where the
   live pages have one -- and stays readable: 0.65 is the floor for text. */
#pop2TradesBody .page-item.disabled .page-link {
  color: var(--bs-pagination-disabled-color);
  opacity: 0.65;
}

/* Rows per page. A real `<label for>` -- the control has to be nameable by
   a screen reader, and a placeholder-ish caption is not a name. */
#pop2TradesBody .tx-pagesize {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 0 0 auto;
}

#pop2TradesBody .tx-pagesize__label {
  color: var(--text-muted);
  font-size: var(--fs-small);
  white-space: nowrap;
  margin-bottom: 0;
}

#pop2TradesBody .tx-pagesize__select {
  width: auto;
  min-height: 34px;
  padding: 0.25rem 1.75rem 0.25rem 0.6rem;
  font-size: 0.82rem;
  border-radius: 10px;
}

/* ── Empty state ────────────────────────────────────────────────────────
 *
 * The empty row carries its own height. There is deliberately no
 * `min-height` anywhere on the ledger: an artificial floor is what leaves a
 * band of nothing between the last row and the footer on a full page.
 */
#pop2TradesBody #tradesTable tbody td.tx-empty {
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
  color: var(--text-muted) !important;
}

/* ══ Mobile ═════════════════════════════════════════════════════════════
 *
 * Below `md` the ledger keeps being a ledger -- a dense chronological list,
 * not a stack of cards. What changes is that the row stops being a table row
 * and becomes a small grid, which is what lets the amount sit hard against
 * the right edge and the qualifier drop under it:
 *
 *   ────────────────────────────────────
 *   July 5, 2026
 *       • Buy    ○ LLY          5 @ $872.60
 *                  Eli Lilly...
 *   ────────────────────────────────────
 *   June 30, 2026
 *       • Deposit                $5,000.00
 *
 * The date hierarchy and the indent are the desktop's, at the phone's
 * gutter. With the date gone from the row there is nothing left that does
 * not fit, so there is no horizontal scrolling and no frozen column. Named
 * grid areas hold the layout steady when the middle slot is empty and its
 * cell is dropped entirely.
 */
@media (max-width: 767.98px) {
  #pop2TradesBody #tradesTable,
  #pop2TradesBody #tradesTable tbody,
  #pop2TradesBody #tradesTable tbody tr,
  #pop2TradesBody #tradesTable tbody td,
  #pop2TradesBody #tradesTable tbody th {
    display: block;
  }

  #pop2TradesBody #tradesTable {
    width: 100%;
    min-width: 0;
    /* `border-collapse` has no meaning once the parts are blocks. */
    border-collapse: separate;
    border-spacing: 0;
  }

  /* ── The row ── */
  #pop2TradesBody #tradesTable tbody tr[data-id] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "type subject amount";
    align-items: center;
    column-gap: 12px;
    /* Tightened from 48px in step with the desktop row, kept a bit more
       conservative here since these rows are the touch surface. */
    min-height: 44px;
    /* The indent is the phone's, measured from the same gutter the date
       heading starts at, so the nesting reads the same as on desktop. */
    padding: 4px var(--card-pad-x) 4px calc(var(--card-pad-x) + 14px);
  }

  /* The desktop row floor is a table-cell height and means nothing to a
     grid; the row itself carries it above. */
  #pop2TradesBody #tradesTable tbody tr[data-id] > td {
    height: auto;
    padding: 0;
    font-size: 0.8rem;
  }

  #pop2TradesBody #tradesTable .tx-col-type    { grid-area: type; }
  #pop2TradesBody #tradesTable .tx-col-subject { grid-area: subject; min-width: 0; }
  #pop2TradesBody #tradesTable .tx-col-amount  { grid-area: amount; text-align: right; }

  /* Widths are the desktop table's and mean nothing to a grid. */
  #pop2TradesBody #tradesTable .tx-col-type,
  #pop2TradesBody #tradesTable .tx-col-amount {
    width: auto;
  }

  /* An empty middle slot leaves its area empty rather than reserving room in
     it; the named areas keep the type and the amount exactly where they were
     on every other row. */
  #pop2TradesBody #tradesTable tbody td.tx-col-subject:empty {
    display: none;
  }

  #pop2TradesBody .tx-type {
    font-size: 0.76rem;
  }
  #pop2TradesBody .tx-amount-value {
    font-size: 0.84rem;
  }

  /* Hover is a pointer idea; on a phone it lingers after a tap. */
  #pop2TradesBody #tradesTable tbody tr[data-id]:hover td {
    background: transparent !important;
  }

  /* ── Date headings ── */
  #pop2TradesBody #tradesTable tbody .tx-group__cell {
    padding: 17px var(--card-pad-x) 3px;
    font-size: 0.89rem;
  }
  #pop2TradesBody #tradesTable tbody .tx-group--first .tx-group__cell {
    padding-top: 11px;
  }

  #pop2TradesBody #tradesTable tbody td.tx-empty {
    padding: var(--space-xl) var(--space-md);
  }

  /* The native bar is a grey slab across the foot of the ledger; in the rare
     case the table does overflow, the fade says the same thing without it.
     Touch and keyboard panning are untouched -- only the bar is hidden. */
  #pop2TradesBody .tx-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #pop2TradesBody .tx-scroll::-webkit-scrollbar {
    display: none;
  }

  /* Filters: one group per line, each keeping its own full-width row rather
     than three controls squeezed onto one. */
  #pop2TradesBody .activity-filters {
    gap: 6px !important;
    padding: 6px;
  }
  #pop2TradesBody .tx-filter-group {
    width: 100%;
  }
  #pop2TradesBody .activity-filters .vr {
    display: none;
  }
  #pop2TradesBody .activity-visibility-note {
    margin-left: 0;
  }
  /* The five type pills are narrower here than their desktop selves so all
     five sit inside a 375px card without needing the scroll .tx-type-segmented
     still falls back to (see base rule) -- the row read as clipped/broken
     rather than intentionally scrollable without this. */
  #pop2TradesBody .tx-type-segmented {
    gap: 5px;
  }
  #pop2TradesBody .tx-type-segment-btn {
    padding: 0 10px;
  }

  /* Pagination: rows-per-page drops to its own line under the page numbers
     rather than competing with them for the width. */
  #pop2TradesBody .tx-pagination {
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-sm);
  }
  #pop2TradesBody .tx-pagination__nav {
    width: 100%;
  }
  /* First/Last are the two that do not fit; Previous/Next and the numbers
     do everything they did. */
  #pop2TradesBody .tx-page-edge {
    display: none;
  }
  /* The whole strip has to fit ~346px at 390px and ~276px at 320px. It gets
     there by losing the horizontal padding and the theme's per-button
     margins, not by shrinking the target: every control stays a 40px-tall
     box at least 38px wide. The ellipsis is the one exception -- it is a
     label, not a target. How many numbers are drawn is the other half of the
     answer, and that is `maxButtons` in the ledger script.

     `flex-wrap` stays on as the backstop: if a font or locale ever makes the
     row wider than the card, it takes a second line rather than running off
     the side of the phone. */
  #pop2TradesBody #paginationControls {
    gap: 4px;
  }
  #pop2TradesBody .page-link {
    min-width: 38px;
    min-height: 40px;
    padding: 0 4px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* The ellipsis is a label rather than a target, so it is the one control
     allowed to be narrow; the width it gives back is what keeps the row on
     one line. */
  #pop2TradesBody .tx-page-gap .page-link {
    width: 26px;
    min-width: 26px;
  }
}

/*
 * Very narrow (small Androids, and an iPhone SE in landscape split view).
 * Only the pagination strip needs anything: the ledger row is a grid and
 * reflows on its own.
 */
@media (max-width: 359.98px) {
  /* The company name goes, and only here. Below this width the identity has
     about 90px for its text, which turns "The Procter & Gamble Company" into
     "The Pro..." -- a stub is not the name, and the ticker above it is the
     identifier. The badge and the ticker are untouched, so the security is
     still presented the way Positions presents it, one line shorter. */
  #pop2TradesBody .tx-security .snapshot-company-name {
    display: none;
  }

  #pop2TradesBody #paginationControls {
    gap: 3px;
  }
  #pop2TradesBody .page-link {
    width: 36px;
    min-width: 36px;
  }
  #pop2TradesBody .tx-page-gap .page-link {
    width: 22px;
    min-width: 22px;
  }
}