/* ══ CLOSEST TO YOU, UNDER THE MAP ═══════════════════════════════════  rp198, 21 Oct 2026 ══
   Sir: "improve the section that's beneath the map. The section shows the closest to you in terms of jobs." It was
   a ruled box of rows in tiny capitals, each led by a circle holding the number of quotes ("0", read as nothing in
   particular), its facts in one run-on line. Now each job is a card: the trade's mark in the family's navy disc, the
   job's own words as its title, the place, the time and the quotes as chips (the quotes in green while nobody has
   priced it), the budget said to be the budget, and an arrow that steps forward under the hand. The rows rise in
   one after another as they arrive. The row keeps `.mn-row[data-job]`, so it and its pin on the map still light each
   other. Wins on count (Mason 05). */

html body #tab-earnings .rcard--map .map-near {
  margin-top: 18px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
html body #tab-earnings .rcard--map .map-near .mn-head {
  display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; padding: 0 2px 12px; border-bottom: 0;
}
html body #tab-earnings .rcard--map .map-near .mn-k {
  display: inline-flex; align-items: center; gap: 8px; font-size: 9.5px; font-weight: 600; letter-spacing: .16em; color: var(--navy, #0A1628);
}
@media (max-width: 760px) { html body #tab-earnings .rcard--map .map-near .mn-k { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
html body #tab-earnings .rcard--map .map-near .mn-k::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #B4842A; box-shadow: 0 0 0 3px rgba(180,132,42,.18); }
html body #tab-earnings .rcard--map .map-near .mn-from { display: inline; margin: 0; font-family: var(--serif); font-size: 14px; color: var(--muted, #636976); }

html body #tab-earnings .rcard--map .map-near .mn-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; overflow: visible;
}
html body #tab-earnings .rcard--map .map-near .mn-list li { list-style: none; min-width: 0; }
html body #tab-earnings .rcard--map .map-near .mn-row {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 28px; align-items: center; column-gap: 14px;
  height: 100%; padding: 14px 14px 14px 16px; border: 0; border-radius: 16px; background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.09), 0 1px 2px rgba(10,22,40,.05), 0 12px 24px -18px rgba(10,22,40,.45);
  transition: translate 260ms cubic-bezier(.16,1,.3,1), box-shadow 260ms cubic-bezier(.16,1,.3,1);
}
html body #tab-earnings .rcard--map .map-near .mn-row:is(:hover, :focus-visible, .is-on) {
  background: #FFFFFF; translate: 0 -2px;
  box-shadow: inset 0 0 0 1px rgba(180,132,42,.55), 0 2px 4px rgba(10,22,40,.06), 0 18px 32px -18px rgba(10,22,40,.5);
}
html body #tab-earnings .rcard--map .map-near .mn-row:focus-visible { outline: 2px solid var(--navy, #0A1628); outline-offset: 2px; }

html body #tab-earnings .rcard--map .map-near .mn-face--trade {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 4px rgba(212,169,67,.13), 0 6px 14px -8px rgba(10,22,40,.6);
  background: radial-gradient(circle at 35% 30%, #1C2A44, #0A1628 70%);
}
html body #tab-earnings .rcard--map .map-near .mn-face--trade svg { width: 21px; height: 21px; fill: none; stroke: #E2BE6A; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

html body #tab-earnings .rcard--map .map-near .mn-name {
  display: block; font-family: var(--serif-display); font-size: 17px; font-weight: 400; letter-spacing: 0; text-transform: none;
  line-height: 1.25; color: var(--navy, #0A1628); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body #tab-earnings .rcard--map .map-near .mn-chips { display: flex; flex-wrap: wrap; gap: 5px 6px; margin-top: 7px; }
html body #tab-earnings .rcard--map .map-near .mn-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px;
  font-family: var(--sans); font-size: 11.5px; line-height: 1.35; color: #3A4150; background: #F3EFE4; white-space: nowrap;
}
@media (max-width: 760px) { html body #tab-earnings .rcard--map .map-near .mn-chip { font-size: 12px; } }  /* rp200 phone floor, was 11.5px */
html body #tab-earnings .rcard--map .map-near .mn-chip svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body #tab-earnings .rcard--map .map-near .mn-chip--q { padding-left: 9px; }
html body #tab-earnings .rcard--map .map-near .mn-chip--q.is-first { color: #0F5A4F; background: rgba(15,90,79,.10); font-weight: 600; }

html body #tab-earnings .rcard--map .map-near .mn-d { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
html body #tab-earnings .rcard--map .map-near .mn-d small {
  display: block; margin: 0 0 2px; font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #636976);
}
@media (max-width: 760px) { html body #tab-earnings .rcard--map .map-near .mn-d small { font-size: 10.5px; } }  /* rp200 phone floor, was 9.5px */
html body #tab-earnings .rcard--map .map-near .mn-dv { font-family: var(--serif-display); font-size: 18px; line-height: 1.2; color: var(--navy, #0A1628); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
html body #tab-earnings .rcard--map .map-near .mn-go {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--navy, #0A1628);
  background: #F3EFE4; opacity: .7; transition: opacity 200ms ease, translate 260ms cubic-bezier(.16,1,.3,1), background 200ms ease;
}
html body #tab-earnings .rcard--map .map-near .mn-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html body #tab-earnings .rcard--map .map-near .mn-row:is(:hover, :focus-visible, .is-on) .mn-go { opacity: 1; translate: 3px 0; background: #E9E1CC; }

@media (prefers-reduced-motion: no-preference) {
  html body #tab-earnings .rcard--map .map-near .mn-list li { animation: mn-rise 560ms cubic-bezier(.16,1,.3,1) both; }
  html body #tab-earnings .rcard--map .map-near .mn-list li:nth-child(2) { animation-delay: 90ms; }
  html body #tab-earnings .rcard--map .map-near .mn-list li:nth-child(3) { animation-delay: 180ms; }
}
@keyframes mn-rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { html body #tab-earnings .rcard--map .map-near .mn-row, html body #tab-earnings .rcard--map .map-near .mn-go { transition: none; } }

@media (max-width: 600px) {
  html body #tab-earnings .rcard--map .map-near .mn-list { grid-template-columns: minmax(0, 1fr); }
  html body #tab-earnings .rcard--map .map-near .mn-row { grid-template-columns: 42px minmax(0, 1fr) auto; column-gap: 12px; padding: 13px 14px; }
  html body #tab-earnings .rcard--map .map-near .mn-face--trade { width: 42px; height: 42px; }
  html body #tab-earnings .rcard--map .map-near .mn-go { display: none; }
}
@media (forced-colors: active) { html body #tab-earnings .rcard--map .map-near .mn-row { border: 1px solid CanvasText; } }