/* taskmap.css: "Tasks near you" map page (taskmap.js, Ren 2026-11-05, pin style B) */
#phHome .ph-sec-h h2 { flex: 1; }
#phHome .ph-mapbtn {
  display: flex; align-items: center; gap: 5px; flex: 0 0 auto; cursor: pointer;
  background: #fff; border: 1px solid rgba(18,38,26,.08); border-radius: 999px; padding: 5px 11px 5px 9px;
  box-shadow: 0 1px 3px rgba(18,38,26,.06); font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1; color: #1e7b34;
}
#phHome .ph-mapbtn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.dark-mode #phHome .ph-mapbtn { background: #16201a; border-color: #2c3a31; color: #4ade80; }

.tm-page {
  --tm-ink: #17201a; --tm-mut: #5d6b62; --tm-line: #dfe6e1; --tm-card: #fff; --tm-bg: #f4f6f4; --tm-g: #2ea84a; --tm-gd: #1e7b34; --tm-gl: #eaf6ed;
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9985; background: var(--tm-bg); color: var(--tm-ink);
  display: flex; flex-direction: column; font-family: Inter, system-ui, sans-serif;
}
.tm-page[hidden] { display: none; }
body.dark-mode .tm-page { --tm-ink: #eef3f0; --tm-mut: #9fb0a5; --tm-line: #2c3a31; --tm-card: #16201a; --tm-bg: #0c1410; --tm-gl: #173022; --tm-gd: #4ade80; }
.tm-page svg { stroke-linecap: round; stroke-linejoin: round; }
.tm-page .tm-top { display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 8px; background: #12301d; color: #fff; flex: none; }
.tm-page .tm-back { width: 38px; height: 38px; border-radius: 12px; border: 0; background: rgba(255,255,255,.1); display: grid; place-items: center; flex: none; }
.tm-page .tm-back svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2.4; }
.tm-page h1 { flex: 1; margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.3px; color: #fff; }
.tm-page .tm-seg { display: flex; background: rgba(255,255,255,.1); border-radius: 12px; padding: 3px; flex: none; }
.tm-page .tm-seg button { border: 0; background: none; font: 600 13px Inter, sans-serif; color: rgba(255,255,255,.75); padding: 7px 11px; border-radius: 9px; display: flex; gap: 5px; align-items: center; }
.tm-page .tm-seg svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.tm-page .tm-seg .on { background: var(--tm-g); color: #fff; }
.tm-page .tm-chips { display: flex; gap: 8px; padding: 10px 12px; overflow-x: auto; flex: none; scrollbar-width: none; background: var(--tm-bg); }
.tm-page .tm-chips::-webkit-scrollbar { display: none; }
.tm-page .tm-chip { flex: none; border: 1px solid var(--tm-line); background: var(--tm-card); color: var(--tm-ink); font: 600 13px Inter, sans-serif; padding: 7px 12px; border-radius: 999px; display: flex; align-items: center; gap: 6px; }
.tm-page .tm-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--nh-cfg, #2ea84a); }
.tm-page .tm-chip.on { border: 2px solid var(--tm-g); background: var(--tm-gl); color: var(--tm-gd); padding: 6px 11px; }
.tm-page .tm-mapwrap { position: relative; flex: 1; overflow: hidden; }
.tm-mapwrap > .tm-map { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #e8eee9; }
body.dark-mode .tm-mapwrap > .tm-map { background: #101a14; }
.tm-page .tm-pill { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: var(--tm-card); border: 1px solid var(--tm-line); border-radius: 999px; padding: 8px 14px; font: 600 13px Inter, sans-serif; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.12); white-space: nowrap; z-index: 5; }
.tm-page .tm-live { width: 9px; height: 9px; border-radius: 50%; background: #e8475f; position: relative; }
.tm-page .tm-live::after { content: ""; position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; border-radius: 50%; border: 2px solid #e8475f; animation: tmRing 1.4s ease-out infinite; }
.tm-page .tm-fab { position: absolute; right: 12px; top: 58px; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--tm-line); background: var(--tm-card); display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0,0,0,.1); z-index: 5; }
.tm-page .tm-fab svg { width: 20px; height: 20px; stroke: var(--tm-ink); fill: none; stroke-width: 2.2; }
.tm-page .tm-empty { position: absolute; left: 24px; right: 24px; top: 40%; text-align: center; background: var(--tm-card); border: 1px solid var(--tm-line); border-radius: 16px; padding: 14px 16px; font-size: 14px; color: var(--tm-mut); z-index: 5; }
.tm-page .tm-empty[hidden] { display: none; }
/* PC (Ren 2026-11-11): the empty-state note was a bar across the whole map; on PC it is a small centred card under the pill */
@media (min-width: 901px) {
  body.dx .tm-page .tm-empty { left: 50%; right: auto; top: 64px; transform: translateX(-50%); width: max-content; max-width: min(440px, calc(100% - 48px)); box-shadow: 0 8px 24px -10px rgba(14, 43, 24, .35); font-size: 14.5px; line-height: 1.45; padding: 14px 20px; }
}
/* skill filter (Ren 2026-11-10) */
.tm-page .tm-empty-b { display: block; margin: 10px auto 0; border: 0; border-radius: 12px; background: var(--tm-g); color: #fff; font: 700 13.5px Inter, sans-serif; padding: 10px 16px; }
.tm-page .pm-skbtn .tm-dn { width: 14px; height: 14px; margin-left: -2px; }
.tm-page .tm-skhint { margin-left: auto; font-size: 12px; color: var(--tm-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tm-page .tm-skopt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 14px; }
.tm-page .tm-skopt button { text-align: left; border: 1px solid var(--tm-line); background: var(--tm-card); color: var(--tm-ink); border-radius: 14px; padding: 11px 12px; display: flex; flex-direction: column; gap: 3px; font-family: Inter, sans-serif; min-width: 0; }
.tm-page .tm-skopt button b { font-size: 14px; font-weight: 800; }
.tm-page .tm-skopt button small { font-size: 12px; color: var(--tm-mut); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tm-page .tm-skopt button.on { border: 2px solid var(--tm-g); background: var(--tm-gl); padding: 10px 11px; }
.tm-page .tm-skopt button.on b { color: var(--tm-gd); }
.tm-page .tm-skopt button:disabled { opacity: .55; }
.tm-page .pm-sks button.tm-mine::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--tm-g); margin-right: 6px; vertical-align: 1px; }

/* pins: style B, round 22px dot with the category icon, blinking */
.tm-pin { position: relative; width: 22px; height: 22px; cursor: pointer; --c: var(--nh-cfg, #2ea84a); }
.tm-pin::before { content: ""; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; } /* bigger tap area */
.tm-pin .tm-head { position: absolute; top: 0; left: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); display: grid; place-items: center; transition: transform .2s; box-sizing: border-box; }
body.dark-mode .tm-pin .tm-head { border-color: #0c1410; }
.tm-pin .tm-head svg { width: 11px; height: 11px; stroke: #fff; fill: none; stroke-width: 2.3; }
.tm-pin .tm-ring { position: absolute; top: 0; left: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; box-sizing: border-box; animation: tmRing 1.8s ease-out infinite; animation-delay: var(--d, 0s); pointer-events: none; }
.tm-pin .tm-r2 { animation-delay: calc(var(--d, 0s) + .6s); }
.tm-pin .tm-glow { position: absolute; top: 0; left: 0; width: 22px; height: 22px; border-radius: 50%; animation: tmGlow 1.8s ease-in-out infinite; animation-delay: var(--d, 0s); pointer-events: none; }
.tm-pin.tm-urgent { --c: #e8475f; }
.tm-pin.tm-urgent .tm-ring, .tm-pin.tm-urgent .tm-glow { animation-duration: 1.1s; }
.tm-pin .tm-tag { position: absolute; left: 16px; top: -12px; background: #e8475f; color: #fff; font: 800 8px Inter, sans-serif; letter-spacing: .4px; padding: 2px 5px; border-radius: 5px; white-space: nowrap; pointer-events: none; }
.tm-pin.tm-sel { z-index: 3; }
.tm-pin.tm-sel .tm-head { transform: scale(1.3); }
.tm-pin.tm-done .tm-ring, .tm-pin.tm-done .tm-glow { display: none; }
.tm-pin.tm-done .tm-head { background: #8b9a90; }
.tm-me { width: 22px; height: 22px; border-radius: 50%; background: #1f6fd1; border: 2px solid #fff; box-shadow: 0 0 0 6px rgba(31,111,209,.2); box-sizing: border-box; display: grid; place-items: center; }
.tm-me svg { width: 11px; height: 11px; stroke: #fff; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tm-me.tm-me-live { animation: tmMe 2s ease-out infinite; }
@keyframes tmMe { 0% { box-shadow: 0 0 0 0 rgba(31,111,209,.45); } 100% { box-shadow: 0 0 0 16px rgba(31,111,209,0); } }
@keyframes tmRing { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes tmGlow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 12px 5px var(--c); } }
@media (prefers-reduced-motion: reduce) { .tm-pin .tm-ring, .tm-pin .tm-glow, .tm-page .tm-live::after, .tm-me.tm-me-live { animation: none; } }

/* card */
.tm-page .tm-card { position: absolute; left: 0; right: 0; bottom: 0; background: var(--tm-card); border-radius: 22px 22px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.18); padding: 8px 18px calc(16px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1); z-index: 8; }
.tm-page .tm-card.tm-open { transform: none; }
.tm-page .tm-grab { width: 40px; height: 5px; border-radius: 3px; background: var(--tm-line); margin: 0 auto 12px; }
.tm-page .tm-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.tm-page .tm-cat { font: 700 12px Inter, sans-serif; padding: 5px 10px; border-radius: 999px; display: flex; gap: 6px; align-items: center; background: var(--nh-cbg, #eaf6ed); color: var(--nh-cfg, #1e7b34); }
.tm-page .tm-cat svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.tm-page .tm-urg { background: #fde8ec; color: #c22f56; font: 800 11px Inter, sans-serif; padding: 5px 9px; border-radius: 999px; letter-spacing: .3px; }
.tm-page .tm-x { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--tm-bg); display: grid; place-items: center; }
.tm-page .tm-x svg { width: 16px; height: 16px; stroke: var(--tm-mut); stroke-width: 2.4; fill: none; }
.tm-page .tm-title { font-size: 19px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-page .tm-pay { font-size: 22px; font-weight: 800; color: var(--tm-gd); margin-bottom: 10px; }
.tm-page .tm-pay small { font-size: 13px; color: var(--tm-mut); font-weight: 600; }
.tm-page .tm-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-bottom: 10px; }
.tm-page .tm-meta div { display: flex; gap: 7px; align-items: center; font-size: 13px; color: var(--tm-mut); font-weight: 500; min-width: 0; }
.tm-page .tm-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-page .tm-meta .tm-wide { grid-column: 1 / 3; }
.tm-page .tm-meta svg { width: 16px; height: 16px; stroke: var(--tm-mut); fill: none; stroke-width: 2; flex: none; }
.tm-page .tm-priv { font-size: 12px; color: var(--tm-mut); background: var(--tm-bg); border-radius: 10px; padding: 8px 10px; margin-bottom: 12px; display: flex; gap: 7px; align-items: center; }
.tm-page .tm-priv svg { width: 15px; height: 15px; stroke: var(--tm-g); fill: none; stroke-width: 2.2; flex: none; }
.tm-page .tm-btns { display: flex; gap: 10px; }
.tm-page .tm-btns button { flex: 1; height: 48px; border-radius: 14px; font: 700 15px Inter, sans-serif; }
.tm-page .tm-b1 { background: var(--tm-card); border: 1.5px solid var(--tm-line); color: var(--tm-ink); }
.tm-page .tm-b2 { background: var(--tm-g); border: 0; color: #fff; flex: 1.4 !important; }
.tm-page .tm-b2.tm-sent { background: var(--tm-gl); color: var(--tm-gd); }
.tm-page .maplibregl-ctrl-attrib { font-size: 10px; }

/* Live location button (on = blue, pulsing; off = grey) */
.tm-page .tm-livebtn { position: absolute; right: 12px; top: 58px; height: 40px; padding: 0 13px 0 11px; border-radius: 999px; border: 1px solid var(--tm-line); background: var(--tm-card); color: var(--tm-mut); display: flex; align-items: center; gap: 8px; font: 700 13px Inter, sans-serif; box-shadow: 0 3px 10px rgba(0,0,0,.12); z-index: 5; }
.tm-page .tm-livebtn i { width: 10px; height: 10px; border-radius: 50%; background: #a8b3ac; position: relative; flex: none; }
.tm-page .tm-livebtn.wait { color: #1f6fd1; border-color: #bcd3f3; }
.tm-page .tm-livebtn.wait i { background: #1f6fd1; opacity: .5; animation: tmBlink 1s ease-in-out infinite; }
.tm-page .tm-livebtn.on { background: #1f6fd1; border-color: #1f6fd1; color: #fff; }
.tm-page .tm-livebtn.on i { background: #fff; }
.tm-page .tm-livebtn.on i::after { content: ""; position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; border-radius: 50%; border: 2px solid #fff; animation: tmRing 1.4s ease-out infinite; }
@keyframes tmBlink { 50% { opacity: 1; } }

/* ───── Provider map for clients (provmap.js, Ren 2026-11-05) ───── */
#nhListView .nh-lv-map {
  flex: 0 0 auto; display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; margin-right: 8px; border-radius: 9px;
  background: #fff; border: 1px solid #e2ebe4; color: var(--green-dark, #1e7b34); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
#nhListView .nh-lv-map svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
body.dark-mode #nhListView .nh-lv-map { background: #16201a; border-color: #2c3a31; color: #4ade80; }
.tm-page .pm-row { display: flex; align-items: center; gap: 8px; padding: 0 12px 10px; flex: none; }
.tm-page .pm-skbtn { display: flex; gap: 6px; align-items: center; border: 1px solid var(--tm-line); background: var(--tm-card); color: var(--tm-ink); border-radius: 12px; padding: 7px 11px; font: 600 13px Inter, sans-serif; max-width: 60%; }
.tm-page .pm-skbtn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-page .pm-skbtn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; flex: none; }
.tm-page .pm-skbtn.has { border-color: var(--tm-g); color: var(--tm-gd); background: var(--tm-gl); }
.tm-page .pm-avail { margin-left: auto; display: flex; align-items: center; gap: 7px; border: 0; background: none; font: 600 12.5px Inter, sans-serif; color: var(--tm-mut); }
.tm-page .pm-sw { width: 36px; height: 21px; border-radius: 11px; background: #c2ccc6; position: relative; transition: background .18s; }
.tm-page .pm-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: left .18s; }
.tm-page .pm-avail.on { color: var(--tm-gd); }
.tm-page .pm-avail.on .pm-sw { background: var(--tm-g); }
.tm-page .pm-avail.on .pm-sw::after { left: 18px; }
.tm-page .pm-dot { width: 9px; height: 9px; border-radius: 50%; background: #2ea84a; }
/* provider pins: round, initials, category colour + icon; available = green dot + pulse */
.pm-pin { position: relative; width: 22px; height: 22px; cursor: pointer; --c: var(--nh-cfg, #2ea84a); }
.pm-pin::before { content: ""; position: absolute; top: -11px; right: -11px; bottom: -11px; left: -11px; }
.pm-pin .pm-head { position: absolute; top: 0; left: 0; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--c); display: grid; place-items: center; font: 800 8px Inter, sans-serif; color: var(--c); box-shadow: 0 2px 6px rgba(0,0,0,.22); box-sizing: border-box; transition: transform .2s; text-transform: none; }
body.dark-mode .pm-pin .pm-head { background: #16201a; }
.pm-pin .pm-ic { position: absolute; right: -4px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--c); border: 1.5px solid #fff; display: grid; place-items: center; box-sizing: border-box; }
.pm-pin .pm-ic svg { width: 6px; height: 6px; stroke: #fff; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pm-pin .pm-on { position: absolute; left: -2px; top: -2px; width: 7px; height: 7px; border-width: 1.5px !important; border-radius: 50%; background: #2ea84a; border: 2px solid #fff; box-sizing: content-box; }
.pm-pin .pm-ring { position: absolute; top: 0; left: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #2ea84a; opacity: 0; box-sizing: border-box; animation: tmRing 2.2s ease-out infinite; animation-delay: var(--d, 0s); pointer-events: none; }
.pm-pin.pm-off { opacity: .55; }
.pm-pin.pm-off .pm-ring { display: none; }
.pm-pin.pm-sel { z-index: 3; }
.pm-pin.pm-sel .pm-head { transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .pm-pin .pm-ring { animation: none; } }
/* provider card */
.tm-page .pm-ph { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.tm-page .pm-av { width: 52px; height: 52px; border-radius: 50%; background: var(--nh-cbg, #eaf6ed); color: var(--nh-cfg, #1e7b34); display: grid; place-items: center; font: 800 18px Inter, sans-serif; position: relative; flex: none; }
.tm-page .pm-av span { position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: #2ea84a; border: 2px solid var(--tm-card); }
.tm-page .pm-who { min-width: 0; flex: 1; }
.tm-page .pm-nm { display: flex; gap: 6px; align-items: center; font-size: 18px; }
.tm-page .pm-nm b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-page .pm-id { font: 700 11px Inter, sans-serif; color: var(--tm-gd); background: var(--tm-gl); padding: 3px 7px; border-radius: 999px; flex: none; }
.tm-page .pm-sub { font-size: 13px; color: var(--tm-mut); margin-top: 2px; }
.tm-page .pm-sub em { font-style: normal; color: var(--tm-gd); font-weight: 700; }
.tm-page .pm-rate { text-align: right; font-size: 12px; color: var(--tm-mut); flex: none; display: flex; flex-direction: column; }
.tm-page .pm-rate b { font-size: 20px; color: var(--tm-gd); font-weight: 800; }
.tm-page .pm-rate b.ask { font-size: 15px; color: var(--tm-ink); }
.tm-page .pm-sk { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tm-page .pm-sk span { font: 600 12px Inter, sans-serif; padding: 5px 9px; border-radius: 999px; background: var(--nh-cbg, #eaf6ed); color: var(--nh-cfg, #1e7b34); }
.tm-page .pm-sk span.more { background: var(--tm-bg); color: var(--tm-mut); }
.tm-page .pm-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--tm-mut); margin-bottom: 10px; }
.tm-page .pm-meta b { color: #c46a0c; }
/* skills sheet */
.tm-page .pm-shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(10,20,14,.44); z-index: 20; }
.tm-page .pm-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 75%; overflow-y: auto; background: var(--tm-card); border-radius: 22px 22px 0 0; padding: 8px 18px calc(18px + env(safe-area-inset-bottom)); z-index: 21; }
.tm-page .pm-shade[hidden], .tm-page .pm-sheet[hidden] { display: none; }
.tm-page .pm-sheet h2 { font-size: 18px; font-weight: 800; margin: 4px 0 2px; }
.tm-page .pm-sheet p { font-size: 13px; color: var(--tm-mut); margin: 0 0 12px; }
.tm-page .pm-sks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tm-page .pm-sks button { border: 1px solid var(--tm-line); background: var(--tm-card); color: var(--tm-ink); border-radius: 999px; padding: 8px 12px; font: 600 13px Inter, sans-serif; }
.tm-page .pm-sks button.on { border: 2px solid var(--tm-g); background: var(--tm-gl); color: var(--tm-gd); padding: 7px 11px; }
.tm-page .pm-sks small { font-size: 11px; color: var(--tm-mut); margin-left: 5px; }

/* client Home: Map pill next to "View all" (Ren 2026-11-05) */
#nhHome .nh-sec-cats h2 { flex: 1; }
#nhHome .nh-sec .nh-mapbtn {
  display: flex; align-items: center; gap: 5px; flex: 0 0 auto; cursor: pointer; margin-right: 8px;
  background: #fff; border: 1px solid rgba(18,38,26,.08); border-radius: 999px; padding: 5px 11px 5px 9px;
  box-shadow: 0 1px 3px rgba(18,38,26,.06); font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1; color: #1e7b34 !important;
}
#nhHome .nh-mapbtn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
body.dark-mode #nhHome .nh-sec .nh-mapbtn { background: #16201a; border-color: #2c3a31; color: #4ade80 !important; }

/* Privacy note (Ren 2026-11-09): pins are a rough area, not the address. */
.tm-page .tm-privnote { position: absolute; bottom: 34px; left: 8px; max-width: 70%; background: var(--tm-card); border: 1px solid var(--tm-line); border-radius: 10px; padding: 5px 10px; font: 500 11px/1.35 Inter, sans-serif; color: var(--tm-mut); text-align: left; box-shadow: 0 2px 8px rgba(0,0,0,.08); z-index: 2; opacity: .95; pointer-events: none; }

/* PC: the skills sheet is a centred panel, not a full-width bottom sheet (Ren 2026-11-11) */
@media (min-width: 901px) {
  body.dx .tm-page .pm-sheet {
    left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%);
    width: min(560px, calc(100% - 48px)); max-height: min(640px, calc(100% - 96px));
    border-radius: 22px; padding: 18px 24px 22px; box-shadow: 0 24px 60px -20px rgba(10, 30, 18, .45);
  }
  body.dx .tm-page .pm-sheet .tm-grab { display: none; }
  body.dx .tm-page .pm-sheet h2 { font-size: 20px; }
}