/* The $29 report's pin picker (the owner, 2026-09-18: the customer fills in the business, sees a
   map, picks a default pin layout or places the pins). One block on full-report.html, between the
   business information and the pay button: ONE CARD (layout A, 26 Sep), its label with a "?", the
   three choices and one line, with a SMALL MAP in the card beside them (the owner, 27 Sep: "the same
   map shown when place them myself is selected but smaller"). "Place them myself" grows the map to the
   card's full width under the choices.

   The instrument's language, borrowed from the service-area canvas (market-intel.css): the same
   obsidian map, the same OSM tiles under the same filter, the same palette buttons and mono
   counters. Tokens from tokens.css; no inline styles (the site's CSP forbids them), so every
   Leaflet marker is a class. */

.pp-block { margin: 2px 0 0; min-width: 0; }

/* the card (the owner, 27 Sep, from the live page: the map "is too small ... this sub section will need to become longer
   length wise"; his screenshot marks it about 360 x 190 px): the label, the three choices and the line on the left, the
   map on the right at about a third of the card's width, 19:10 (about 361 x 190 at 1440), from the card's top to its
   bottom. The left side starts at the card's top (the owner on 1.2.437: "it should be at the top instead"), and the
   choices stretch to a 20 px gutter from the map ("the text should also get closer to the small map window"). */
.pp-row {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 37%, 380px);
  grid-template-areas: "top map" "msg map" ". map"; grid-template-rows: auto auto 1fr;
  gap: 8px 20px; align-items: start; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
}
.pp-top { grid-area: top; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
.pp-row-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pp-row-t { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* the three choices: the recommended grid, the even square, and the customer's own hand */
.pp-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; min-width: 0; }
.pp-block:not(.is-grown) .pp-modes { flex: 1 1 auto; }
.pp-block:not(.is-grown) .pp-modes .pp-btn { flex: 1 1 auto; }
/* (a font shorthand cannot carry inherit: the browser dropped the whole declaration and the buttons ran at the page's
   13 px regular; the site plan's section 10) */
/* (and 44 px tall at least: a tap target, the review of f9da203b, L3; it was 34) */
.pp-btn { min-height: 44px; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; padding: 9px 12px; border-radius: 8px; border: 1.5px solid #242b28; background: transparent; color: #a7b1ab; cursor: pointer; white-space: nowrap; }
.pp-btn:hover { color: #eef2ef; background: #141917; }
.pp-btn:focus-visible { outline: 2px solid #43d597; outline-offset: 2px; }
.pp-btn.on { background: #43d597; color: #0c221a; border-color: #43d597; }
/* (the hand rests like the other two: nothing looks chosen until the visitor chooses, review 29b L5) */
.pp-btn.hand.on { background: #e6b654; color: #241a06; border-color: #e6b654; }
/* (the page ships the three disabled and the module makes them live: a module that failed to load leaves them visibly off) */
.pp-btn[disabled] { opacity: .42; cursor: default; }

/* the line: why the pins sit where they do */
.pp-msg { grid-area: msg; margin: 0; font-size: .86rem; line-height: 1.45; color: var(--muted); min-height: 1.2em; }
.pp-msg.bad { color: #ec7663; }
.pp-msg.good { color: #43d597; }

/* the canvas. It isolates: Leaflet stacks its panes and controls at z-index 200 to 1000, and without a stacking context of
   the box's own those painted over the fixed header as the map scrolled under it (the site plan's section 10). Small in
   the card; the whole card's width, and tall, while the pins are placed by hand. */
/* (justify-self stretch: an item with an aspect ratio otherwise takes its width from a stretched height, and ran past its
   column where the choices wrap, 768 px wide) */
.pp-map { grid-area: map; position: relative; isolation: isolate; aspect-ratio: 19 / 10; min-height: 150px; align-self: stretch; justify-self: stretch; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #0e1412; }
/* grown: the hand's map, and since 27 Sep the card's map opened on a click to look at the grid (view only) */
.pp-block.is-grown .pp-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "msg" "map"; grid-template-rows: auto; }
.pp-block.is-grown .pp-map { height: 380px; aspect-ratio: auto; border-radius: 14px; }
/* the grow and the shrink, eased (the owner, 27 Sep: "the current transition just kind of blinks into place"): pin-picker.js
   draws the map's box where it was and eases it, and the card's height, to where they now are; none with reduced motion */
.pp-map.pp-anim { transition: transform .3s ease, width .3s ease, height .3s ease; }
.pp-row.pp-anim { transition: height .3s ease; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .pp-map.pp-anim, .pp-row.pp-anim { transition: none; }
}
/* a grid laid in the card's map: a click opens it bigger */
.pp-block.has-grid:not(.is-grown) .pp-map { cursor: zoom-in; }
/* the way back from the grown view */
.pp-shrink { position: absolute; z-index: 600; right: 10px; top: 10px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1.5px solid #43d597; background: #0d100fe6; color: #eef2ef; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.pp-shrink:hover { background: #141917; }
.pp-shrink:focus-visible { outline: 2px solid #43d597; outline-offset: 2px; }
.pp-shrink[hidden] { display: none; }
.pp-map .leaflet-container { background: #0e1412; height: 100%; font-family: inherit; }
.pp-map .pp-tiles { filter: invert(1) hue-rotate(180deg) brightness(.72) contrast(1.05) saturate(.25); }
.pp-map .leaflet-control-attribution { background: #0d100fcc; color: #67716b; font-size: 10px; }
.pp-map .leaflet-control-attribution a { color: #67716b; }
.pp-map .leaflet-control-zoom a { background: #141917; color: #a7b1ab; border-color: #242b28; }
.pp-map.placing .leaflet-container { cursor: crosshair; }
/* the small map is a picture of the grid: no zoom buttons, and the attribution one short line */
.pp-block:not(.is-grown) .pp-map .leaflet-control-zoom { display: none; }
.pp-block:not(.is-grown) .pp-map .leaflet-control-attribution { font-size: 8px; line-height: 1.3; padding: 0 3px; }

.pp-hint { position: absolute; z-index: 500; right: 10px; top: 10px; background: #0d100fdd; border: 1px solid #242b28; border-radius: 10px; padding: 7px 11px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: #a7b1ab; max-width: 260px; backdrop-filter: blur(6px); }
.pp-hint b { color: #43d597; }
.pp-hint.gone { display: none; }
.pp-block:not(.is-placing) .pp-hint { display: none; }

/* "N of 25": how many places the grid shown checks, in the map's corner */
.pp-count { position: absolute; z-index: 500; left: 6px; top: 6px; padding: 2px 7px; border: 1px solid #242b28; border-radius: 8px; background: #0d100fdd; font-family: var(--font-mono); font-size: .72rem; color: #a7b1ab; white-space: nowrap; }
.pp-count b { color: #43d597; font-weight: 700; }
.pp-count b.cap { color: #e6b654; }

/* a pin is a numbered disc; the centre one is the business itself, in gold. In the card's map they are dots. */
.pp-pin { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #0b0e0d; border: 2px solid #43d597; box-shadow: 0 0 7px rgba(67, 213, 151, .45); font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: #43d597; }
.pp-pin.home { border-color: #e6b654; color: #e6b654; box-shadow: 0 0 9px rgba(230, 182, 84, .5); }
.pp-pin.movable { cursor: grab; }
.pp-pin.movable:active { cursor: grabbing; }
.leaflet-marker-draggable .pp-pin { cursor: grab; }
/* (dots, not rings: 25 rings in a 100 px map ran into one mass, review grid25 L4) */
.pp-block:not(.is-grown) .pp-pin { width: 9px; height: 9px; margin: 7.5px; font-size: 0; border: 0; background: #43d597; box-shadow: none; }
.pp-block:not(.is-grown) .pp-pin.home { background: #e6b654; }

/* THE $99 PAIR (the audit of 27 Sep, gap 1): the same card on the Market report's form, for the pair's Visibility report,
   under the "More options" fold in the fields' column (market-intelligence.html). It ships hidden and shows with the pair
   (pin-picker.js syncPair). That column is narrower than the $29 form from 901 px to about 1,200, where the map beside the
   choices would leave them a third of the card, so the card stacks by its own width as it does on a phone: the label, the
   choices, the line, then the map across the card. Its label is longer than the $29's, so it wraps. */
.mi-grid { container-type: inline-size; }
.mi-grid .pp-row-t { white-space: normal; }
@container (max-width: 600px) {
  .mi-grid .pp-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "msg" "map"; grid-template-rows: auto; }
  .mi-grid .pp-map { height: 200px; min-height: 200px; aspect-ratio: auto; }
  .mi-grid.is-grown .pp-map { height: 320px; }
}
/* the pair's lines on the $99 form, as the $29 form draws its own (money-onetime.css .fr-cityask and .fr-kept): why the pair
   needs the ZIP, the card's ask under the ZIP, and a kept order's line above Order. Colour on the words or a full border. */
.mi-zipneed { margin: 6px 0 0; font-size: .8rem; line-height: 1.4; color: var(--muted); }
.mi-zipask { margin: 6px 0 0; font-size: .8rem; line-height: 1.4; color: #ec7663; }
/* the $29 form's place line under the City or ZIP: what the field was read as, "86004 → Flagstaff, AZ" (the owner, 29 Sep;
   pin-picker.js setPlace), in a neutral voice beside the ask under it */
.fr-place { margin: 5px 0 0; font-size: .8rem; line-height: 1.4; color: var(--faint); }
/* ...and the phone beside the ZIP still lines up with it, label with label and field with field, while a line stands under
   the ZIP (the $99 form lines its rows of two up by their bottoms, market-intel.css, and the ZIP's line would push its
   field above the phone's). While the two sit side by side, each takes three rows of the row's own grid, its label, its
   field and its lines: the $29 form's rows of two (money-onetime.css). One column below 901 px (presence.css). */
@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    .mr-form .rtwo.mi-ziprow { grid-template-rows: auto auto auto; row-gap: 0; align-items: stretch; }
    .mr-form .rtwo.mi-ziprow > .rfield { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; }
  }
}
.mi-kept { margin: 0; padding: 10px 12px; border: 1px solid rgba(236, 118, 99, .5); border-radius: 10px; background: rgba(236, 118, 99, .08); color: var(--ink); font-size: .88rem; line-height: 1.45; }
.mi-kept:empty { display: none; }

/* on a phone the card stacks: the label, the choices (two, then the hand across both), the line, then the map across the
   card, 200 px tall */
@media (max-width: 760px) {
  .pp-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "msg" "map"; grid-template-rows: auto; padding: 12px; }
  .pp-top { display: grid; gap: 8px; }
  .pp-row-t { white-space: normal; letter-spacing: .1em; }
  .pp-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .pp-btn { width: 100%; text-align: center; white-space: normal; }
  .pp-modes .pp-btn.hand { grid-column: 1 / -1; }
  .pp-map { height: 200px; min-height: 200px; aspect-ratio: auto; }
  .pp-block.is-grown .pp-map { height: 320px; }
  .pp-hint { display: none; }
}