/* =============================================================================
   hyyryn-map-card.css                                         21 Oct 2026 (rp191)
   The jobs map's pins, cards and controls (drawn by hyyryn-jobs-map.js), in the
   site's grammar: what is pressed is a pill, what opens is a card with a ring
   and a shadow, the navy and the cream of every other surface. Scoped to the
   map's own id, so Leaflet's sheet and the page's older pin rules lose on count.
   Sir, 21 Oct 2026: "improve the map and its features."
   ============================================================================= */

/* ── a pin: a pill sized to its words, its tail on the place ── */
#jobsMap .jp-icon { width: 0; height: 0; }
#jobsMap .jp {
  position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 9px));
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: #FFFDF8; color: var(--navy, #0A1628);
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.22), 0 1px 2px rgba(10,22,40,.12), 0 10px 20px -10px rgba(10,22,40,.55);
  font: 600 12.5px/1 var(--sans, 'Inter', system-ui, sans-serif); letter-spacing: .01em; font-variant-numeric: tabular-nums;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(.16,1,.3,1), box-shadow 160ms ease;
}
#jobsMap .jp::after {   /* the tail */
  content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg);
  background: inherit; box-shadow: 1px 1px 0 rgba(10,22,40,.22); border-radius: 0 0 2px 0;
}
#jobsMap .jp::before {  /* the point on the place */
  content: ''; position: absolute; left: 50%; bottom: -12px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: var(--navy, #0A1628); box-shadow: 0 0 0 2px #FFFDF8;
}
#jobsMap .jp.is-many { background: var(--navy, #0A1628); color: #FAF8F3; box-shadow: inset 0 0 0 1px rgba(212,169,67,.55), 0 10px 20px -10px rgba(10,22,40,.7); }
#jobsMap .jp.is-many::after { box-shadow: 1px 1px 0 rgba(212,169,67,.55); }
#jobsMap .jp.is-many .jp-n::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #D4A943; vertical-align: 1px; }
#jobsMap .jp:hover, #jobsMap .jp.is-on { transform: translate(-50%, calc(-100% - 12px)); background: var(--navy, #0A1628); color: #FAF8F3; }
#jobsMap .jp.is-many:hover, #jobsMap .jp.is-many.is-on { background: #1B2A44; }
#jobsMap .jp:focus-visible { outline: 2px solid var(--navy, #0A1628); outline-offset: 3px; }

/* ── the reach circle's label, on its edge ── */
#jobsMap .jp-ring-icon { width: 0; height: 0; }
#jobsMap .jp-ring {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; background: rgba(250,248,243,.94); color: #4A5262;
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.18); font: 600 10.5px/1.3 var(--sans, 'Inter', system-ui, sans-serif); letter-spacing: .1em; text-transform: uppercase;
}

/* ── the card a pin opens ── */
#jobsMap .jp-pop .leaflet-popup-content-wrapper {
  border-radius: 18px; padding: 0; background: #FFFDF8; color: var(--ink, #1B2230);
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.12), 0 2px 4px rgba(10,22,40,.08), 0 24px 48px -20px rgba(10,22,40,.55);
}
#jobsMap .jp-pop .leaflet-popup-content { margin: 0; width: auto !important; min-width: 248px; }
#jobsMap .jp-pop .leaflet-popup-tip { background: #FFFDF8; box-shadow: 1px 1px 0 rgba(10,22,40,.12); }
#jobsMap .jp-pop a.leaflet-popup-close-button { top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font: 400 18px/1 var(--sans, sans-serif); color: #4A5262; }
#jobsMap .jp-pop a.leaflet-popup-close-button:hover { background: rgba(10,22,40,.06); color: var(--navy, #0A1628); }
#jobsMap .jp-card { padding: 14px 14px 12px; }
#jobsMap .jp-k { margin: 0 34px 8px 4px; font: 600 10.5px/1.4 var(--sans, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: #83632C; }
#jobsMap .jp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 196px; overflow-y: auto; overscroll-behavior: contain; }
#jobsMap a.jp-go { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: baseline;
  padding: 9px 12px; border-radius: 12px; text-decoration: none; color: inherit;
  background: #F6F2E8; box-shadow: inset 0 0 0 1px rgba(10,22,40,.06); transition: background-color 160ms ease, box-shadow 160ms ease; }
#jobsMap a.jp-go:hover { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(10,22,40,.2), 0 8px 18px -12px rgba(10,22,40,.5); }
#jobsMap a.jp-go:focus-visible { outline: 2px solid var(--navy, #0A1628); outline-offset: 2px; }
#jobsMap .jp-t { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 400 15.5px/1.3 var(--serif, Georgia, serif); color: var(--navy, #0A1628); }
#jobsMap .jp-v { font: 600 12.5px/1.3 var(--sans, sans-serif); color: var(--navy, #0A1628); font-variant-numeric: tabular-nums; white-space: nowrap; }
#jobsMap .jp-m { grid-column: 1; font: 400 12px/1.45 var(--sans, sans-serif); color: #4A5262; }
#jobsMap a.jp-go::after { content: 'Price it \2192'; grid-column: 2; grid-row: 2; justify-self: end; font: 600 11.5px/1.45 var(--sans, sans-serif); color: var(--navy, #0A1628);
  opacity: .55; transition: opacity 160ms ease; }
#jobsMap a.jp-go:hover::after, #jobsMap a.jp-go:focus-visible::after { opacity: 1; }
#jobsMap a.jp-more { display: inline-block; margin: 10px 4px 2px; font: 500 13px/1.4 var(--sans, sans-serif); color: var(--navy, #0A1628); }

/* ── the controls: pills on the map, with the site's ring ── */
#jobsMap .leaflet-bar { border: 0; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(10,22,40,.14), 0 8px 18px -10px rgba(10,22,40,.45); }
#jobsMap .leaflet-bar a, #jobsMap .leaflet-bar button { width: 34px; height: 34px; line-height: 34px; border: 0; border-bottom: 1px solid rgba(10,22,40,.08);
  background: #FFFDF8; color: var(--navy, #0A1628); font: 400 20px/34px var(--sans, sans-serif); }
#jobsMap .leaflet-bar a:last-child, #jobsMap .leaflet-bar button:last-child { border-bottom: 0; }
#jobsMap .leaflet-bar a:hover, #jobsMap .leaflet-bar button:hover { background: #FFFFFF; }
#jobsMap .jp-home { display: grid; place-items: center; padding: 0; cursor: pointer; }
#jobsMap .jp-home svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
#jobsMap .jp-home:focus-visible, #jobsMap .leaflet-bar a:focus-visible { outline: 2px solid var(--navy, #0A1628); outline-offset: -2px; }
#jobsMap .leaflet-control-attribution { margin: 0 8px 8px 0; padding: 2px 8px; border-radius: 999px; background: rgba(250,248,243,.86); font-size: 10.5px; }
#jobsMap .leaflet-tooltip { border-radius: 999px; padding: 4px 10px; text-transform: none; letter-spacing: 0; font-size: 12px; }

/* ── a phone: one finger scrolls the page; a sideways drag is told how to move the map ── */
#jobsMap .jp-tip {
  position: absolute; left: 50%; top: 50%; z-index: 1000; transform: translate(-50%, -50%); pointer-events: none;
  padding: 9px 16px; border-radius: 999px; background: rgba(10,22,40,.86); color: #FAF8F3; white-space: nowrap;
  font: 500 13px/1.3 var(--sans, 'Inter', system-ui, sans-serif); opacity: 0; transition: opacity 200ms ease;
}
#jobsMap .jp-tip.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) { #jobsMap .jp, #jobsMap a.jp-go, #jobsMap .jp-tip { transition: none; } }
@media (forced-colors: active) { #jobsMap .jp { border: 1px solid CanvasText; } }