/* plan-map.css: "Your map", the plan's map card in act two's map grid chapter (assets/js/plan-map.js; the owner's
 * requirement of 27 Sep 2026). The report's own tokens (report-view.css :root) and its instrument language: the map is
 * the market map's obsidian map (OSM tiles under the same filter), each point a dot in the chapter's own colours (the
 * tiles above it: top three mint, 4 to 10 gold, 11 to 20 ink, not in the twenty red), the business a gold ring.
 *
 * The card lays itself out by its OWN width (a container query), so it is the same card wherever act two stands. THE
 * CONTROLS SIT UNDER THE READING (the review of 27 Sep, rule 2): the map first, then the four layouts in a panel with a
 * thin top border, four to a row on a wide page, two, then one; and "Add 10 more points" is an outline button (rule 7:
 * one gold button a screen). No inline styles anywhere (the page's CSP drops them): every mark is a class, and the map
 * box isolates, so Leaflet's own stacking stays under the page's fixed header. */
.pm-card{container:pm/inline-size;margin-top:18px;padding-top:16px;border-top:1px solid var(--line2)}
.pm-card [hidden]{display:none !important}
.pm-head{margin:0 0 12px}
.pm-kick{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
.pm-status{font-size:.92rem;line-height:1.55;color:var(--ink);margin:0;max-width:72em}
.pm-layout{font-size:.86rem;line-height:1.5;color:var(--ink2);margin:4px 0 0;max-width:72em}
.pm-pending{display:inline-block;margin:8px 0 0;padding:6px 11px;border:1px solid var(--gold-line);border-radius:8px;background:var(--gold-soft);font:600 12px/1.45 var(--body);color:var(--gold);max-width:72em}

.pm-body{display:grid;gap:14px 20px;grid-template-columns:minmax(0,1fr)}
.pm-left,.pm-right{min-width:0}
/* the controls, under the map they change, in a panel with a thin top border */
.pm-right{padding-top:14px;border-top:1px solid var(--line2)}

/* the map */
.pm-mapwrap{position:relative;isolation:isolate;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0e1412}
.pm-map{height:300px;background:#0e1412}
.pm-map.leaflet-container{background:#0e1412;font-family:var(--body)}
.pm-map .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.72) contrast(1.05) saturate(.25)}
.pm-map .leaflet-control-attribution{background:#0d100fcc;color:#67716b;font-size:10px}
.pm-map .leaflet-control-attribution a{color:#67716b}
.pm-map .leaflet-control-zoom a{background:#141917;color:#a7b1ab;border-color:#242b28}
.pm-map.placing.leaflet-grab,.pm-map.placing .leaflet-interactive{cursor:crosshair}
.pm-hint{position:absolute;z-index:500;left:10px;top:10px;margin:0;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:#0d100fdd;font:500 11px var(--mono);color:var(--ink2);pointer-events:none}

/* the points: Leaflet draws each as an SVG circle carrying these classes (a class beats Leaflet's own fill) */
.pm-map path.pm-pin{stroke:#0b0e0d;stroke-width:1.5}
.pm-map path.pm-pin.top3{fill:var(--mint)}
.pm-map path.pm-pin.top10{fill:var(--gold)}
.pm-map path.pm-pin.top20{fill:var(--ink)}
.pm-map path.pm-pin.out{fill:var(--bad)}
.pm-map path.pm-pin.unread{fill:#0b0e0d;stroke:var(--ink3);stroke-width:2}
/* (release 29) a corner not measured: too few businesses listed, a wider search, or nobody listed; gray, never red */
.pm-map path.pm-pin.notmeas{fill:var(--ink3);stroke:#0b0e0d}
.pm-map path.pm-pin.prev{fill:var(--ink2)}
.pm-map path.pm-pin.fill{fill:rgba(167,177,171,.16);stroke:var(--ink2);stroke-width:1.6}
.pm-icon{background:none;border:0}
.pm-handpin{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--gold);border:2px solid #0b0e0d;box-shadow:0 0 0 2px rgba(230,182,84,.35);font:700 10px var(--mono);color:#241a06;cursor:grab}
.pm-handpin:active{cursor:grabbing}
.pm-home{display:block;width:18px;height:18px;border-radius:50%;border:2px solid var(--gold);background:radial-gradient(circle,var(--gold) 0 3px,rgba(11,14,13,.7) 3.5px);box-shadow:0 0 9px rgba(230,182,84,.55)}
.pm-map .leaflet-tooltip{background:#101513;color:var(--ink);border:1px solid var(--line);border-radius:6px;box-shadow:none;padding:3px 8px;font:500 11px var(--mono)}
.pm-map .leaflet-tooltip-top:before{border-top-color:var(--line)}
.pm-tip{white-space:nowrap}

/* the key under the map, in the chapter's words */
.pm-legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;padding:0}
.pm-key{display:inline-flex;align-items:center;gap:6px;font:500 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.pm-keyn{font-weight:700;color:var(--ink)}
.pm-dot{display:inline-block;flex:none;width:11px;height:11px;border-radius:50%;border:1.5px solid #0b0e0d}
.pm-dot.top3{background:var(--mint)}.pm-dot.top10{background:var(--gold)}.pm-dot.top20{background:var(--ink)}.pm-dot.out{background:var(--bad)}
.pm-dot.unread{background:#0b0e0d;border-color:var(--ink3)}.pm-dot.notmeas{background:var(--ink3)}.pm-dot.prev{background:var(--ink2)}.pm-dot.fill{background:rgba(167,177,171,.16);border-color:var(--ink2)}
.pm-dot.hand{background:var(--gold)}.pm-dot.home{width:13px;height:13px;border:2px solid var(--gold);background:radial-gradient(circle,var(--gold) 0 2px,transparent 2.5px)}

/* the four layouts */
.pm-ask{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:0 0 8px}
.pm-choices{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.pm-choice{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;min-height:44px;margin:0;padding:10px 12px;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--ink);font-family:var(--body);cursor:pointer}
.pm-choice:hover{border-color:var(--ink3)}
.pm-choice:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.pm-choice.on{border-color:var(--mint);background:var(--mint-soft)}
.pm-choice[disabled]{opacity:.55;cursor:default}
.pm-choice-t{font:700 15px/1.2 var(--disp);letter-spacing:.02em;color:var(--ink)}
.pm-choice-l{font-size:12.5px;line-height:1.42;color:var(--ink2)}
.pm-choice-s{font:500 11px/1.4 var(--mono);color:var(--gold)}
.pm-tag{margin-top:3px;padding:2px 8px;border-radius:999px;font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.pm-tag.now{color:var(--mint);background:var(--mint-soft)}
.pm-tag.next{color:var(--gold);background:var(--gold-soft)}

/* what a layout means, and saving it */
.pm-msg{margin:10px 0 0;font-size:.86rem;line-height:1.5;color:var(--ink2)}
.pm-msg:empty{display:none}
.pm-msg.bad{color:var(--bad)}.pm-msg.good{color:var(--mint)}
.pm-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pm-use{min-height:44px;padding:10px 18px;border:0;border-radius:999px;background:var(--mint);color:#10231a;font:600 13px var(--body);cursor:pointer}
.pm-use:hover,.pm-use:focus-visible{filter:brightness(1.08);outline:2px solid var(--mint-soft);outline-offset:2px}
.pm-use[disabled]{opacity:.55;cursor:default;filter:none}
.pm-back{min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:600 13px var(--body);cursor:pointer}
.pm-back:hover,.pm-back:focus-visible{border-color:var(--ink3);outline:none}

/* more points */
.pm-pack{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line2)}
.pm-pack-l{flex:1 1 22em;margin:0;font-size:.86rem;line-height:1.5;color:var(--ink2)}
.pm-buy{min-height:44px;padding:10px 18px;border:1px solid var(--gold-line);border-radius:999px;background:transparent;color:var(--gold);font:600 13px var(--body);white-space:nowrap;cursor:pointer}
.pm-buy:hover,.pm-buy:focus-visible{border-color:var(--gold);background:var(--gold-soft);outline:none}
.pm-buy[disabled]{opacity:.6;cursor:default;filter:none}
.pm-pack-msg{flex-basis:100%;margin:0;font-size:.86rem;line-height:1.5;color:var(--ink2)}
.pm-pack-msg:empty{display:none}
.pm-pack-msg.bad{color:var(--bad)}.pm-pack-msg.good{color:var(--mint)}
/* buying needs the customer's own sign-in: the one button that mails a link back, and the way out for whoever a link signed in */
.pm-signin{min-height:44px;padding:10px 18px;border:1px solid var(--gold-line);border-radius:999px;background:var(--gold-soft);color:var(--gold);font:600 13px var(--body);cursor:pointer}
.pm-signin:hover,.pm-signin:focus-visible{border-color:var(--gold);outline:none}
.pm-signin[disabled]{opacity:.6;cursor:default}
.pm-signout{min-height:44px;padding:10px 14px;border:0;background:transparent;color:var(--ink3);font:600 12px var(--body);text-decoration:underline;cursor:pointer}
.pm-signout:hover,.pm-signout:focus-visible{color:var(--ink);outline:none}

/* the card's own width decides: two layouts to a row, then four, always under the map */
@container pm (min-width:520px){
  .pm-map{height:340px}
  .pm-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container pm (min-width:760px){
  .pm-map{height:420px}
  .pm-choices{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@container pm (max-width:519px){
  .pm-buy{width:100%;white-space:normal}
  .pm-use,.pm-back{flex:1 1 auto}
}

@container pm (max-width:519px){
  .pm-signin{width:100%}
}

@media print{
  .pm-ask,.pm-choices,.pm-msg,.pm-actions,.pm-pack,.pm-hint,.pm-map .leaflet-control-zoom{display:none !important}
  .pm-map .leaflet-tile-pane{filter:saturate(.15)}
  .pm-mapwrap,.pm-map,.pm-map.leaflet-container{background:#fff;border-color:#999}
  .pm-kick,.pm-pending{color:#8a6b1f}
  .pm-status{color:#111}.pm-layout,.pm-key{color:#444}
  .pm-mapwrap{break-inside:avoid}
  /* the key's dots ARE the measure (a color a rank band): they print whatever the "Background graphics" box says (the
     release review of 29 Sep, as round 2's B2 did for the report's bars) */
  .pm-dot{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}