/*
 * Phase 13: cross-venue links. The market page's Cross-venue panel
 * (js/pm-links-ui.js mountLinksPanel, inside a .md-card), the scanner's
 * Cross-venue tab (a pm-live-table, whose rows turn to cards under 640 px)
 * and the Dutch book (analysis) drawer. Colours are the tokens only, so the
 * light and dark themes both follow; everything wraps at 375 px.
 *
 * A confidence badge always carries its word. A review link's edge stays
 * neutral text; only a positive edge on a link not under review takes the
 * success colour (.pml-edge-pos), beside its sign.
 */

.pml-panel[hidden], .pml-tab[hidden] { display: none; }

/* ── the scanner: the presets' parts put away while Cross-venue is open ── */
.pmsc-page.is-links [data-pmsc-preset-only] { display: none; }

/* ── badges, chips, status ───────────────────────────────────────────── */
.pml-badge, .pml-chip-review, .pml-status, .pml-closed {
  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;
  white-space: nowrap;
  color: var(--color-text);
  background: var(--color-surface);
}
.pml-conf-exact { border-color: var(--color-accent); font-weight: 700; }
.pml-conf-high { border-color: var(--color-info); }
.pml-conf-review { border-style: dashed; }
.pml-chip-review { color: var(--color-warning); border-color: var(--color-warning); background: var(--color-warning-bg, transparent); font-weight: 600; }
.pml-status-confirmed { font-weight: 700; }
.pml-status-denied { color: var(--color-text-muted); text-decoration: line-through; }
.pml-closed { color: var(--color-text-muted); border-style: dotted; }
.pml-kind { font-weight: 600; font-size: 0.82rem; }

.pml-edge { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-text); }
.pml-edge-pos { color: var(--color-success); font-weight: 600; }
.pml-edge.is-review { color: var(--color-text); }
.pml-market { color: var(--color-accent); overflow-wrap: anywhere; }
.pml-fresh { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 0.72rem; color: var(--color-text-muted); }
.pml-actions { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.pml-actions .btn { min-height: 28px; color: var(--color-text); background: var(--color-surface-raised, var(--color-surface)); border: 1px solid var(--color-border); }
.pml-actions .btn:hover { background: var(--color-surface); }
.pml-actions .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pml-msg { font-size: 0.78rem; color: var(--color-text-muted); }
.pml-msg[role="alert"] { color: var(--color-danger); }

/* ── the market page's panel ─────────────────────────────────────────── */
.pml-list { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.pml-link { border: 1px solid var(--color-border); border-radius: var(--radius-sm, 4px); padding: var(--space-2, 8px); background: var(--color-surface); min-width: 0; }
.pml-link.is-review { border-style: dashed; }
.pml-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2, 8px); margin-bottom: var(--space-2, 8px); }
.pml-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2, 8px) var(--space-3, 12px); margin: 0; font-size: 0.82rem; }
.pml-figures dt { font-size: 0.72rem; color: var(--color-text-muted); }
.pml-figures dd { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.pml-other { grid-column: 1 / -1; }
.pml-dir { font-size: 0.75rem; }
.pml-noprice { margin: var(--space-2, 8px) 0 0; font-size: 0.8rem; }
.pml-caveats { margin: var(--space-2, 8px) 0 0; padding-left: 1.1em; font-size: 0.78rem; color: var(--color-text-secondary, var(--color-text-muted)); }
.pml-match { margin-top: var(--space-2, 8px); font-size: 0.8rem; }
.pml-match summary { cursor: pointer; color: var(--color-text); font-weight: 600; min-height: 24px; }
.pml-match summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pml-rules { width: 100%; border-collapse: collapse; margin-top: 4px; }
.pml-rules th, .pml-rules td { padding: 3px 6px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.pml-rules thead th { font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); }
.pml-rules tr.is-diff th, .pml-rules tr.is-diff td strong { color: var(--color-warning); }
.pml-note { font-size: 0.72rem; }
.pml-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px); margin-top: var(--space-2, 8px); }

/* ── the scanner's tab ───────────────────────────────────────────────── */
.pml-tab { display: flex; flex-direction: column; gap: var(--space-2, 8px); min-height: 0; flex: 1; }
.pml-tools { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px) var(--space-3, 12px); align-items: center; }
.pml-filter { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--color-text-muted); }
.pml-filter select { min-height: 32px; font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm, 4px); padding: 0 6px; }
.pml-filter select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pml-note-line { margin: 0; font-size: 0.8rem; }
.pml-table-slot { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pml-table-slot pm-live-table { flex: 1; min-height: 280px; --pm-lt-height: max(280px, calc(100vh - 360px)); }
.pml-table-slot .pm-overlay { margin-top: var(--space-2, 8px); }

/* ── the Dutch book (analysis) drawer ────────────────────────────────── */
.pml-db-wrap { position: fixed; inset: 0; z-index: var(--z-modal, 1000); }
.pml-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-bg) 55%, transparent); }
.pml-db {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 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;
}
.pml-db-banner { margin: 0; padding: 6px 10px; border: 1px solid var(--color-warning); border-left-width: 4px; border-radius: var(--radius-sm, 4px); background: var(--color-warning-bg, transparent); color: var(--color-text); font-weight: 700; font-size: 0.85rem; }
.pml-db-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2, 8px); }
.pml-db-title { font-size: var(--font-size-lg, 1.1rem); margin: 0; overflow-wrap: anywhere; }
.pml-close { color: var(--color-text); background: var(--color-surface-raised, var(--color-surface)); border: 1px solid var(--color-border); }
.pml-close:hover { background: var(--color-surface); }
.pml-close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pml-db-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; font-size: 0.85rem; }
.pml-db-pair { margin: 0 0 var(--space-2, 8px); }
.pml-db-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-2, 8px); margin: 0 0 var(--space-2, 8px); }
.pml-db-facts dt { font-size: 0.72rem; color: var(--color-text-muted); }
.pml-db-facts dd { margin: 2px 0 0; font-weight: 600; }
.pml-db-table { width: 100%; border-collapse: collapse; }
.pml-db-table th, .pml-db-table td { padding: 4px 6px; border-bottom: 1px solid var(--color-border); text-align: left; }
.pml-db-table thead th { font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); }
.pml-db-table .pm-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pml-db-worst { margin: var(--space-2, 8px) 0 0; }
.pml-db-body .pm-side-label { margin: var(--space-3, 12px) 0 4px; font-weight: 600; }

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