/*
 * Phase 12: the market scanner (/markets/scanner, pages/markets-scanner.js)
 * and its "Top opportunities" card on the Markets page. It shares the
 * Markets page's layout (markets.css: .pm-page, .pm-banner, .pm-status,
 * .pm-empty, .pm-error) and the live table's own sheet (pm-live-table.css),
 * whose rows turn to cards under 640 px. Colours are the tokens only, so
 * the light and dark themes both follow; everything wraps at 375 px.
 */

/* ── the header and presets ──────────────────────────────────────────── */
.pmsc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3, 12px); flex-wrap: wrap; }
.pmsc-head h1 { font-size: var(--font-size-xl, 1.25rem); margin: 0; }
.pmsc-sub { margin: 4px 0 0; font-size: 0.82rem; }
.pmsc-head-tools { display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap; }
.pmsc-closes-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.pmsc-closes-select { min-height: 32px; }
.pmsc-why { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmsc-money { margin: 0 0 4px; padding-left: 1.1em; font-size: 0.85rem; }
.pmsc-why-line { margin: 0 0 4px; font-size: 0.85rem; }

.pmsc-tabs { display: flex; gap: var(--space-1, 4px); flex-wrap: wrap; border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-2, 8px); }
.pmsc-tab {
  min-height: 32px;
  padding: 0 var(--space-2, 8px);
  font: inherit;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
}
.pmsc-tab:hover { color: var(--color-text); background: var(--color-surface); }
/* Selected: filled and bold, so it is not told by colour alone. */
.pmsc-tab[aria-selected="true"] { color: var(--color-text); background: var(--color-surface-raised, var(--color-surface)); border-color: var(--color-accent); font-weight: 700; box-shadow: inset 0 -2px 0 var(--color-accent); }
.pmsc-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── the weights editor ──────────────────────────────────────────────── */
.pmsc-weights {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface);
  padding: var(--space-3, 12px);
}
.pmsc-weights[hidden] { display: none; }
.pmsc-weights-title { font-size: var(--font-size-lg, 1.1rem); margin: 0 0 4px; }
.pmsc-weights > p { margin: 0 0 var(--space-2, 8px); font-size: 0.8rem; }
.pmsc-sliders { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2, 8px) var(--space-4, 16px); }
.pmsc-slider { display: grid; grid-template-columns: minmax(0, 1fr) 3.2em; align-items: center; gap: 2px var(--space-2, 8px); }
.pmsc-slider label { grid-column: 1 / -1; font-size: 0.82rem; font-weight: 600; color: var(--color-text); }
.pmsc-slider input[type="range"] { width: 100%; min-height: 28px; accent-color: var(--color-accent); }
.pmsc-slider input[type="range"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pmsc-slider output { font-family: var(--font-mono); font-size: 0.8rem; font-variant-numeric: tabular-nums; text-align: right; color: var(--color-text); }
.pmsc-slider-note { grid-column: 1 / -1; margin: 0; font-size: 0.72rem; }
.pmsc-weights-actions { display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap; margin-top: var(--space-3, 12px); font-size: 0.8rem; }

/* ── the table ───────────────────────────────────────────────────────── */
.pmsc-table-slot { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pmsc-table-slot pm-live-table { flex: 1; min-height: 280px; --pm-lt-height: max(280px, calc(100vh - 320px)); }
.pmsc-table-slot .pm-overlay { margin-top: var(--space-2, 8px); }
.pmsc-more { display: flex; justify-content: center; }

.pmsc-score { display: inline-flex; align-items: center; gap: 6px; cursor: help; }
.pmsc-num { font-family: var(--font-mono); font-size: 0.8rem; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; color: var(--color-text); }
.pmsc-bar { width: 56px; height: 8px; flex: none; }
.pmsc-bar-sm { width: 44px; }
.pmsc-bar-track { fill: var(--color-bg-tertiary, var(--color-border)); }
.pmsc-bar-fill { fill: var(--color-accent); }
.pmsc-score.is-gated .pmsc-num { color: var(--color-text-muted); text-decoration: line-through; }

.pmsc-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.pmsc-chip {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.72rem;
  line-height: 18px;
  color: var(--color-text);
  background: var(--color-surface);
  white-space: nowrap;
}
/* Paper only: dashed and labelled "(paper)" in words. */
.pmsc-chip.is-paper { border-style: dashed; color: var(--color-paper, var(--color-info)); }
.pmsc-paper { font-size: 0.7rem; color: var(--color-paper, var(--color-info)); }
.pmsc-explain-btn { min-height: 28px; color: var(--color-text); background: var(--color-surface-raised, var(--color-surface)); border: 1px solid var(--color-border); }
.pmsc-explain-btn:hover { background: var(--color-surface); }

/* ── the explanation panel: a modal panel on the right ───────────────── */
.pmsc-explain-wrap { position: fixed; inset: 0; z-index: var(--z-modal, 1000); }
.pmsc-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-bg) 55%, transparent); }
.pmsc-explain {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(600px, 100vw);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--color-surface-raised, var(--color-surface));
  color: var(--color-text);
  border-left: 1px solid var(--color-border);
  box-shadow: -8px 0 24px color-mix(in srgb, var(--color-text) 15%, transparent);
  box-sizing: border-box;
}
.pmsc-explain-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2, 8px); }
.pmsc-explain-title { font-size: var(--font-size-lg, 1.1rem); margin: 0; overflow-wrap: anywhere; }
.pmsc-close { color: var(--color-text); background: var(--color-surface-raised, var(--color-surface)); border: 1px solid var(--color-border); }
.pmsc-close:hover { background: var(--color-surface); }
.pmsc-explain-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; font-size: 0.85rem; }
.pmsc-explain-body .pm-side-label { margin: var(--space-3, 12px) 0 4px; }
.pmsc-summary { margin: 0 0 4px; font-weight: 600; }
.pmsc-weights-used { margin: 0 0 4px; font-size: 0.78rem; color: var(--color-text-muted); }
.pmsc-caveats { margin: 0 0 var(--space-2, 8px); padding-left: 1.1em; font-size: 0.8rem; color: var(--color-text-secondary, var(--color-text-muted)); }
.pmsc-gate { margin: 0 0 var(--space-2, 8px); padding: 4px 8px; border-left: 3px solid var(--color-warning); background: var(--color-warning-bg, transparent); }

.pmsc-dims-wrap { overflow-x: auto; }
.pmsc-dims { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.pmsc-dims caption { text-align: left; font-size: 0.75rem; color: var(--color-text-muted); padding-bottom: 4px; }
.pmsc-dims th, .pmsc-dims td { padding: 4px 6px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.pmsc-dims thead th { font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); }
.pmsc-dims tbody th { font-weight: 600; white-space: nowrap; }
.pmsc-dims .pm-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pmsc-dims tr.is-missing th, .pmsc-dims tr.is-missing td { color: var(--color-text-muted); }
.pmsc-dim-value { display: inline-flex; align-items: center; gap: 6px; }
.pmsc-na { font-style: italic; }
.pmsc-note { font-size: 0.72rem; margin-top: 2px; }

.pmsc-persist-words { margin: 0 0 4px; }
.pmsc-spark svg { max-width: 100%; height: auto; display: block; }
.pmsc-fits { margin: 0; padding-left: 1.1em; }
.pmsc-fits li { margin-bottom: 2px; }
.pmsc-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px); margin-top: var(--space-3, 12px); padding-top: var(--space-2, 8px); border-top: 1px solid var(--color-border); }
.pmsc-links [data-pmsc-bots] { display: contents; }
.pmsc-links .btn { color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); }
.pmsc-full { font-size: 0.8rem; color: var(--color-accent); }

@media (max-width: 639px) {
  .pmsc-explain { width: 100vw; padding: var(--space-3, 12px); }
  /* The dimension table as stacked lines: no sideways scroll at 375 px. */
  .pmsc-dims thead { display: none; }
  .pmsc-dims tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-2, 8px); padding: 6px 0; border-bottom: 1px solid var(--color-border); }
  .pmsc-dims th, .pmsc-dims td { border-bottom: 0; padding: 0; }
  .pmsc-dims td:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: no-preference) {
  .pmsc-explain { animation: pmsc-slide 160ms ease-out; }
}
@keyframes pmsc-slide {
  from { transform: translateX(24px); opacity: 0.6; }
  to { transform: none; opacity: 1; }
}

/* ── the Markets page's "Top opportunities" card ─────────────────────── */
.pmsc-top {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1, 4px) var(--space-3, 12px);
  font-size: 0.8rem;
}
.pmsc-top[hidden] { display: none; }
.pmsc-top-title { font-size: 0.8rem; font-weight: 700; margin: 0; }
.pmsc-top-list { display: flex; flex-wrap: wrap; gap: var(--space-1, 4px) var(--space-3, 12px); margin: 0; padding: 0; list-style: none; counter-reset: pmsc-top; min-width: 0; }
.pmsc-top-list li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; counter-increment: pmsc-top; }
.pmsc-top-list li::before { content: counter(pmsc-top) "."; color: var(--color-text-muted); }
.pmsc-top-market { color: var(--color-text); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmsc-top-more { margin-left: auto; color: var(--color-accent); }
@media (max-width: 639px) {
  .pmsc-top-list { flex-direction: column; }
  .pmsc-top-market { max-width: 100%; }
  .pmsc-top-more { margin-left: 0; }
}