/* Matchup Lab — app-specific styles. Shell, panels, tables and KPIs come from
   shared/hp-shell.css (loaded after this file). Brand rules: DESIGN.md. */

.ml-ctx .hp-field { min-width: 150px; flex: 0 1 220px; }
.ml-ctx .hp-field:nth-child(3) { flex-basis: 260px; }
.ml-filter { width: 220px; height: 30px; font-size: 12.5px; }

.ml-name { font-weight: 600; color: var(--brand-blue); white-space: nowrap; }
.ml-g { font: 700 9.5px/1 var(--font-ui); border-radius: 4px; padding: 3px 5px; vertical-align: middle; margin-left: 5px; letter-spacing: .04em; }
.ml-g-m { background: var(--brand-blue); color: #fff; }
.ml-g-f { background: var(--brand-pool); color: #fff; }
.ml-sub { display: block; font: 500 10.5px/1.2 var(--font-ui); color: var(--ink-4); margin-top: 2px; }
.ml-na { color: var(--ink-4); }
.ml-row-picked td { background: rgba(0,154,199,.06) !important; }
.ml-pick { width: 16px; height: 16px; accent-color: var(--brand-blue); cursor: pointer; }

/* "vs field" bar: athlete average against the field range */
.ml-bar-col { min-width: 120px; }
.ml-bar { position: relative; height: 8px; background: var(--line-2); border-radius: 4px; overflow: hidden; min-width: 110px; }
.ml-bar > i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px; background: var(--brand-pool); }
.ml-bar > i.hi { background: var(--status-direct); }
.ml-bar > s { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--brand-blue); opacity: .55; }

/* Side by side */
.ml-compare-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(230px, 1fr)); gap: 14px; overflow-x: auto; }
.ml-compare-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; }
.ml-cc-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.ml-cc-head b { color: var(--brand-blue); font: 700 20px/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.ml-cc-head span { font-size: 12px; color: var(--ink-3); }
.ml-cc-kpis { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ml-cc-kpis b { font: 500 12px/1 var(--font-mono); color: var(--ink); text-transform: none; letter-spacing: 0; }
.ml-cc-dives { display: flex; flex-direction: column; gap: 3px; }
.ml-cc-dive { display: grid; grid-template-columns: 1fr 64px 44px; gap: 8px; padding: 6px 9px; border-radius: 7px; border: 1px solid transparent; font-size: 12.5px; align-items: center; }
.ml-cc-dive .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ml-cc-dive .small { text-align: right; }
.ml-cc-dive.is-shared { background: rgba(0,154,199,.09); border-color: var(--brand-pool); }
.ml-cc-foot { margin-top: 12px; font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.ml-cc-shared-swatch { width: 14px; height: 14px; border-radius: 4px; background: rgba(0,154,199,.09); border: 1px solid var(--brand-pool); display: inline-block; }

/* Pairings */
.ml-pairs { display: flex; flex-direction: column; }
.ml-pair { display: grid; grid-template-columns: 40px 1.2fr 1.5fr; gap: 12px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--line-2); }
.ml-pair:first-child { border-top: 0; }
.ml-pair-rank { font: 700 14px/1 var(--font-mono); color: var(--brand-pool); }
.ml-pair-names { display: flex; flex-direction: column; gap: 2px; }
.ml-pair-names .ml-pair-line { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; }
.ml-pair-names b { color: var(--brand-blue); }
.ml-pair-names em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.ml-pair-math { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.ml-pair-math em { font-style: normal; }
.ml-pair-math em.up { color: var(--status-direct); }
.ml-pair-math em.down { color: var(--brand-red); }
.ml-pair-math b { color: var(--brand-blue); font-size: 15px; }
.ml-pairs-foot { margin-top: 12px; font-size: 11.5px; color: var(--ink-3); }
.ml-empty-inline { color: var(--ink-3); font-size: 13px; padding: 4px 0; }

@media (max-width: 860px) {
  .ml-pair { grid-template-columns: 32px 1fr; }
  .ml-pair-math { grid-column: 2; }
  .ml-ctx .hp-field { flex: 1 1 calc(50% - 8px); }
  .ml-ctx #mlLoad { display: none; }
  .ml-filter { width: 100%; }
  .ml-bar-col, .ml-bar { display: none; }
}