/*
 * The Markets page (Phase 5, PMD-UI-001, PMD-UI-011): a KPI strip, the
 * market table and a side panel. 1101px and up: the three areas fit the
 * window, the table owning its scroll. 769 to 1100px: the side panel drops
 * below as a sheet. Under 640px the table turns to cards (pm-live-table).
 * Colours come from tokens only, so the light theme follows.
 */

.pm-page { display: flex; flex-direction: column; gap: var(--space-3, 12px); min-height: 0; }

.pm-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-2, 8px);
}
.pm-tile {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface);
  padding: var(--density-pad, 12px);
  min-width: 0;
}
.pm-tile.is-later .pm-tile-value { color: var(--color-text-muted); }
.pm-tile-label { font-size: 0.75rem; color: var(--color-text-secondary, var(--color-text-muted)); }
.pm-tile-value { font-size: 1.15rem; font-weight: 600; color: var(--color-text); }
.pm-tile-scope { font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pm-num { font-variant-numeric: tabular-nums; }

.pm-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-3, 12px); flex: 1; min-height: 0; }
.pm-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pm-table-slot { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pm-table-slot pm-live-table { flex: 1; min-height: 320px; --pm-lt-height: max(320px, calc(100vh - 290px)); }
.pm-status { margin: 0 0 var(--space-2, 8px); font-size: 0.8rem; color: var(--color-text-muted); }

.pm-side {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface);
  padding: var(--space-3, 12px);
  overflow: auto;
  min-height: 0;
}
.pm-side-label { font-size: 0.75rem; color: var(--color-text-muted); }
.pm-health { font-size: 0.82rem; margin-bottom: var(--space-3, 12px); }
.pm-detail-title { font-size: 1rem; margin: 0 0 4px; }
.pm-detail-ticker { font-size: 0.75rem; color: var(--color-text-muted); margin: 0 0 8px; }
.pm-detail-rules { font-size: 0.82rem; }
.pm-side-hint { font-size: 0.75rem; margin-top: var(--space-3, 12px); }

.pm-widish { color: var(--color-warning); }
.pm-wide { color: var(--color-danger); }

.pm-empty, .pm-error { padding: var(--space-4, 16px); border: 1px dashed var(--color-border); border-radius: var(--radius-md, 8px); }

/* Tablet: the side panel below the table, as a sheet. */
@media (max-width: 1100px) {
  .pm-body { grid-template-columns: minmax(0, 1fr); }
  .pm-side { max-height: 40vh; }
}

/* Phone: the strip scrolls sideways, two tiles in view. */
@media (max-width: 639px) {
  .pm-strip { grid-auto-flow: column; grid-auto-columns: 46%; grid-template-columns: none; overflow-x: auto; }
}

/* Phase 6: the live catalogue's filter bar, banners, sort mode, rows and quick look. */
.pm-filter-slot { min-width: 0; }
.pm-banner {
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md, 8px);
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  color: var(--color-text);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-size: 0.82rem;
}
.pm-banner[hidden] { display: none; }
.pm-status-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2, 8px); flex-wrap: wrap; margin-bottom: var(--space-2, 8px); }
.pm-status-row .pm-status { margin: 0; }
.pm-sortmode { display: inline-flex; gap: var(--space-1, 4px); }
.pm-table-slot { position: relative; }
.pm-overlay { position: absolute; inset: 48px 0 auto 0; display: flex; justify-content: center; padding: var(--space-4, 16px); z-index: 5; }
.pm-overlay[hidden] { display: none; }
.pm-overlay > div { background: var(--color-surface); max-width: 520px; width: 100%; text-align: center; }

.pm-disclose {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; margin-right: 2px;
  border: 1px solid transparent; border-radius: var(--radius-sm, 4px);
  background: transparent; color: var(--color-text-muted); cursor: pointer; font: inherit; line-height: 1;
}
.pm-disclose:hover { background: var(--color-surface-raised); color: var(--color-text); }
.pm-disclose:focus-visible, .pm-kebab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.pm-kebab {
  width: 28px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm, 4px);
  background: transparent; color: var(--color-text-muted); cursor: pointer; font-size: 1rem; line-height: 1;
}
.pm-kebab:hover, .pm-kebab[aria-expanded="true"] { background: var(--color-surface-raised); color: var(--color-text); }
.pm-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-child { padding-left: var(--space-4, 16px); color: var(--color-text-secondary, var(--color-text)); }
.pm-pin { color: var(--color-warning); }
pm-live-table tr[data-kind="group"] { font-weight: 600; }
pm-live-table tr[data-kind="outcome"] { background: color-mix(in srgb, var(--color-surface-raised) 50%, transparent); }
pm-live-table tr[data-kind="placeholder"] td { color: transparent; }
.pm-sum-low { color: var(--color-success); }
.pm-sum-high { color: var(--color-warning); }
.pm-up { color: var(--color-success); }
.pm-down { color: var(--color-danger); }

.pm-quick-spark { margin: var(--space-2, 8px) 0; min-height: 56px; }
.pm-quick-bots { list-style: none; margin: 0 0 var(--space-2, 8px); padding: 0; font-size: 0.85rem; }
.pm-quick-bots li { padding: 2px 0; }
.pm-quick-shots { margin: var(--space-2, 8px) 0; font-size: 0.85rem; }
.pm-detail h3.pm-side-label { margin: var(--space-3, 12px) 0 4px; font-weight: 600; }

/* The Live charts bar (2026-10-26): each coin's 15-minute market trading now, one tap from its LIVE chart. */
.pmlb-slot { margin: 6px 0 10px; }
.pmlb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pmlb-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.pmlb-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.pmlb-row::-webkit-scrollbar { display: none; }
.pmlb-btn { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 10px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; flex: 0 0 auto; box-shadow: 0 2px 0 var(--color-border); transition: transform 80ms ease, box-shadow 80ms ease, border-color 120ms ease; }
.pmlb-btn:hover, .pmlb-btn:focus-visible { border-color: var(--color-accent); outline: none; }
.pmlb-btn:active { transform: translateY(2px); box-shadow: none; }
.pmlb-btn.is-empty { cursor: default; opacity: 0.6; box-shadow: none; }
.pmlb-coin { font-weight: 700; font-size: 1rem; display: inline-flex; align-items: center; gap: 6px; }
.pmlb-live { width: 7px; height: 7px; border-radius: 50%; background: var(--color-danger); animation: pmlb-pulse 1.6s ease-in-out infinite; }
@keyframes pmlb-pulse { 50% { opacity: 0.3; } }
.pmlb-chance { font-family: var(--font-mono, monospace); font-weight: 700; justify-self: end; }
.pmlb-sub { grid-column: 1 / -1; font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; }
.pmlb-shots { font-size: 0.85rem; white-space: nowrap; }
.pm-title { cursor: pointer; }
.pm-title:hover { text-decoration: underline; }
.pm-more { position: relative; }
.pm-more > summary { list-style: none; cursor: pointer; }
.pm-more > summary::-webkit-details-marker { display: none; }
.pm-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; min-width: 220px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
@media (prefers-reduced-motion: reduce) { .pmlb-live { animation: none; } .pmlb-btn { transition: none; } }
@media (max-width: 640px) { .pmlb-shots { width: 100%; } }