/* Phone Trades view (static/phone-trades.js). Phones only: at 600px and below it replaces the
   Trading tab's Today's Activity sub-tab. Each trade is one row: time, a region dot, the
   shorthand title and price on the first line; a quiet detail and the size or change under it. */
.pt { display: none; }

@media (max-width: 600px) {
  #sub-trading > :not(.pt) { display: none !important; }
  #sub-trading > .pt { display: block; }
  /* Trades is its own section on phones: no Trading sub-tabs or staff tape above it. */
  #tab-asx:has(> #sub-trading.active) > :is(.sub-tab-bar, #market-tape) { display: none !important; }
  body[data-mobile-sub="trading"] .contact-desk-fab { display: none; }

  .pt { --pt-gutter: max(16px, env(safe-area-inset-left, 0px)); color: var(--text); }
  .pt-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -6px 0 6px; min-height: 28px; font-size: 12px; color: var(--text-muted); }
  .pt-market { display: flex; align-items: center; gap: 6px; color: var(--text); }
  .pt-market--open::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--positive); }

  .pt-stats { display: flex; align-items: baseline; gap: 18px; font-size: 12px; color: var(--text-muted); }
  .pt-stat[hidden] { display: none; }
  .pt-stat b { margin-right: 4px; font-family: var(--font-mono); font-size: clamp(18px, 5vw, 21px); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

  .pt-top { margin-top: 12px; }
  .pt-top[hidden] { display: none; }
  .pt-top-k { font-size: 12px; color: var(--text-muted); }
  .pt-top-chips { display: flex; gap: 6px; margin: 6px calc(-1 * var(--pt-gutter)) 0; padding: 0 var(--pt-gutter) 2px; overflow-x: auto; scrollbar-width: none; }
  .pt-top-chips::-webkit-scrollbar { display: none; }
  /* A soft right edge says the chips scroll. */
  .pt-top-chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .pt-chip { flex: none; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 15px; background: var(--bg-card); border: 1px solid var(--border); font-size: 12px; white-space: nowrap; }
  .pt-chip b { font-weight: 600; }
  .pt-chip-lots { font-family: var(--font-mono); color: var(--text-muted); }
  .pt-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; }

  .pt-filters {
    position: sticky;
    top: calc(var(--top-bar-h) + env(safe-area-inset-top, 0px));
    z-index: 5;
    margin: 10px calc(-1 * var(--pt-gutter)) 0;
    padding: 10px var(--pt-gutter);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-subtle);
  }
  .pt-seg { display: grid; grid-template-columns: repeat(var(--pt-filter-count, 5), minmax(0, 1fr)); padding: 3px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border); }
  .pt .pt-seg button { min-width: 0; height: 34px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-muted); font: 600 13px/1 var(--font-sans); }
  .pt .pt-seg button[hidden] { display: none; }
  .pt .pt-seg button[aria-pressed="true"] { background: var(--surface-elevated); color: var(--text); }

  .pt-hour { margin: 0; padding: 14px 0 6px; font: 600 11px/1.3 var(--font-sans); letter-spacing: var(--track-wide); color: var(--text-dim); }
  .pt-list { list-style: none; margin: 0 calc(-1 * var(--pt-gutter)); padding: 0; }
  .pt-row { border-top: 1px solid var(--border-subtle); }
  .pt-row--big { box-shadow: inset 3px 0 0 var(--amber); }
  .pt-row--open { background: color-mix(in srgb, var(--surface-elevated) 45%, transparent); }
  .pt-line {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    column-gap: 8px;
    row-gap: 3px;
    align-items: baseline;
    width: 100%;
    padding: 11px var(--pt-gutter);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
  }
  button.pt-line { cursor: pointer; }
  .pt-time { grid-row: 1; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
  .pt-what { grid-row: 1; display: flex; align-items: center; gap: 7px; min-width: 0; }
  .pt-title { min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
  .pt-px { grid-row: 1; font-family: var(--font-mono); font-size: 16px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
  .pt-detail { grid-row: 2; grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; padding-left: 14px; font-size: 12px; color: var(--text-muted); }
  .pt-detail > span + span::before { content: '\00B7'; margin-right: 6px; color: var(--text-dim); }
  .pt-big { color: var(--amber); font-weight: 600; }
  .pt-legs-hint { color: var(--accent); }
  .pt-right { grid-row: 2; grid-column: 3; font-family: var(--font-mono); font-size: 12px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pt-up { color: var(--positive); }
  .pt-down { color: var(--negative); }
  .pt-flat { color: var(--text-muted); }

  .pt-legs { margin: -2px var(--pt-gutter) 12px calc(var(--pt-gutter) + 52px); padding: 2px 12px 10px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border); }
  .pt-leg { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: 8px; align-items: baseline; min-height: 32px; padding-top: 8px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
  .pt-legs--prints .pt-leg { grid-template-columns: minmax(0, 1fr) auto auto; }
  .pt-legs--prints .pt-leg-what { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
  .pt-side { font-size: 11px; font-weight: 700; color: var(--text-dim); }
  .pt-side--buy { color: var(--positive); }
  .pt-side--sell { color: var(--negative); }
  .pt-leg-what { min-width: 0; overflow-wrap: anywhere; }
  .pt-leg-lots { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
  .pt-leg-px { min-width: 52px; font-family: var(--font-mono); font-weight: 600; text-align: right; }
  .pt-leg-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }

  .pt-empty { margin: 24px 0; font-size: 14px; text-align: center; color: var(--text-muted); }
  .pt .pt-more {
    display: flex;
    width: 100%;
    min-height: 44px;
    margin: 8px 0;
    border-radius: 12px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text);
    font: 600 14px/1 var(--font-sans);
    align-items: center;
    justify-content: center;
  }
  .pt-foot { margin: 0; padding: 12px 0 4px; border-top: 1px solid var(--border-subtle); font-size: 11px; line-height: 1.5; color: var(--text-dim); }
  .pt button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .pt .pt-line:focus-visible { box-shadow: inset var(--focus-ring); }
}