/* 212.8: people on the team map. Vehicles are dark holly pills with a heading arrow (app.css .veh); people are light
   round tokens with initials, ringed by role. Principal brass, team holly, family sage. */
:root{--phm-p:#9A7328;--phm-pL:#C8A566;--phm-t:#152019;--phm-f:#5E7F66;--phm-bg:#FAF7F1}
.phm{z-index:7}
.phm[data-role="p"]{z-index:8}
.phm button{position:relative;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer;border-radius:50%}
.phm button:focus-visible{outline:2px solid var(--phm-pL);outline-offset:3px}
.phm-t{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--phm-bg);color:var(--phm-t);
  font:600 11.5px/1 var(--sans);letter-spacing:.04em;box-shadow:0 0 0 2.5px var(--phm-t),0 8px 18px -8px rgba(21,32,25,.65);transition:transform .35s var(--ease),box-shadow .35s var(--ease),opacity .35s}
.phm-t.phm-p{color:#6B4F17;box-shadow:0 0 0 2.5px var(--phm-p),0 0 0 5px rgba(200,165,102,.28),0 8px 18px -8px rgba(21,32,25,.65)}
.phm-t.phm-f{color:#3F5A46;box-shadow:0 0 0 2.5px var(--phm-f),0 8px 18px -8px rgba(21,32,25,.65)}
/* live: one quiet ring that breathes outwards; never on reduced motion */
.phm[data-st="live"] button::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--phm-t);opacity:0;animation:phmpulse 2.8s ease-out infinite;pointer-events:none}
.phm[data-st="live"][data-role="p"] button::before{border-color:var(--phm-pL)}
.phm[data-st="live"][data-role="f"] button::before{border-color:var(--phm-f)}
@keyframes phmpulse{0%{transform:scale(.9);opacity:.85}100%{transform:scale(1.85);opacity:0}}
/* moving: a small dot on the ring shows it is under way, without pretending to know the heading */
.phm.moving .phm-t::after{content:"";position:absolute;right:-1px;top:-1px;width:9px;height:9px;border-radius:50%;background:#4E8A60;box-shadow:0 0 0 2px var(--phm-bg)}
.phm-t{position:relative}
/* stale: outline only, with its age underneath */
.phm[data-st="stale"] .phm-t{background:rgba(250,247,241,.82);color:#5F6359;box-shadow:0 0 0 2px rgba(95,99,89,.55),0 6px 14px -8px rgba(21,32,25,.5);opacity:.92}
.phm[data-st="stale"] .phm-t.phm-p{box-shadow:0 0 0 2px rgba(154,115,40,.55),0 6px 14px -8px rgba(21,32,25,.5)}
.phm[data-st="stale"] button{outline:1.5px dashed rgba(95,99,89,.6);outline-offset:1px}
.phm-a{position:absolute;left:50%;top:37px;transform:translateX(-50%);white-space:nowrap;font:500 10px/1 var(--sans);letter-spacing:.03em;color:#4F534A;
  background:rgba(250,247,241,.92);border:1px solid rgba(79,83,74,.25);border-radius:999px;padding:3px 6px;pointer-events:none}
.phm-a:empty{display:none}
/* the name only on hover, focus or selection */
.phm-n{position:absolute;left:40px;top:50%;transform:translate(-4px,-50%);opacity:0;pointer-events:none;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-start;
  background:var(--phm-t);color:var(--parch,#F3EFE6);border-radius:8px;padding:6px 9px;box-shadow:0 8px 20px -8px rgba(21,32,25,.6);transition:opacity .2s,transform .2s;text-align:left}
.phm-n b{font:500 12px/1.15 var(--sans)}.phm-n small{font:400 10.5px/1.25 var(--sans);color:rgba(243,239,230,.72)}
.phm button:hover .phm-n,.phm button:focus-visible .phm-n,.phm.sel .phm-n{opacity:1;transform:translate(0,-50%)}
.phm.sel .phm-t{transform:scale(1.12)}
.phm.sel{z-index:9}
/* on board: people ride inside the car's pill */
.veh .vob{display:inline-flex;align-items:center;margin:0 2px 0 -2px}
.veh .vob .phm-t{width:20px;height:20px;font-size:8.5px;letter-spacing:.02em;box-shadow:0 0 0 1.5px var(--phm-t)}
.veh .vob .phm-t.phm-p{box-shadow:0 0 0 1.5px var(--phm-pL),0 0 0 3.5px rgba(200,165,102,.3)}
.veh .vob .phm-t.phm-f{box-shadow:0 0 0 1.5px #8FB098}
.veh .vob .phm-t+.phm-t{margin-left:-5px}
/* the card */
.phm-pop .maplibregl-popup-content{padding:0;border-radius:12px;background:var(--phm-bg);box-shadow:0 18px 40px -16px rgba(21,32,25,.55);border:1px solid #DED7C9;overflow:hidden}
.phm-pop .maplibregl-popup-tip{border-top-color:var(--phm-bg);border-bottom-color:var(--phm-bg)}
.phmc{width:250px;font:400 13px/1.45 var(--sans);color:var(--ink,#1D2320)}
.phmc-h{display:flex;align-items:center;gap:10px;padding:12px 12px 10px 14px;border-bottom:1px solid #E7E1D4}
.phmc-h>div{flex:1;min-width:0}.phmc-h b{display:block;font:500 14px/1.2 var(--sans)}.phmc-h small{display:block;color:#5F6359;font-size:11.5px;letter-spacing:.02em}
.phmc .phm-t.mid{width:32px;height:32px;font-size:12px}
.phmc-x{width:32px;height:32px;border-radius:50%;border:0;background:none;font-size:20px;line-height:1;color:#5F6359;cursor:pointer}
.phmc-x:hover{background:#EFEADF}
.phmc-s{display:flex;align-items:center;gap:7px;margin:10px 14px 0;font-weight:500}
.phmc-s i{width:8px;height:8px;border-radius:50%;background:#4E8A60;box-shadow:0 0 0 3px rgba(78,138,96,.18)}
.phmc-s[data-st="stale"] i{background:#A8936A;box-shadow:0 0 0 3px rgba(168,147,106,.2)}
.phmc dl{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 12px;margin:10px 14px 0}
.phmc dl div{min-width:0}.phmc dt{font:500 10px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#8A7A55}.phmc dd{margin:2px 0 0;font-variant-numeric:tabular-nums}
.phmc-f{margin:12px 0 0;padding:9px 14px 11px;border-top:1px solid #E7E1D4;font-size:11.5px;color:#5F6359;background:#F5F1E8}
/* night map and discreet mode */
.night .phm-t{background:#EDE6D6}
.discreet .phm-t,.discreet .phm-n b{filter:blur(4px)}
@media (prefers-reduced-motion:reduce){.phm[data-st="live"] button::before{animation:none;opacity:.5;transform:scale(1.3)}.phm-t,.phm-n{transition:none}}
@media (max-width:860px){.phm-n{display:none}.phm.sel .phm-n{display:flex}}
/* the phones list: Show on map */
.ops-ph .ph-fly{display:block;margin:4px 0 0 auto;padding:2px 0;border:0;background:none;cursor:pointer;font:500 12px/1.2 var(--sans);color:#7A5C1E;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(122,92,30,.35)}
.ops-ph .ph-fly:hover{text-decoration-color:currentColor}

/* 212.8: vehicles, redrawn. A rounded square with a side-on glyph, so a car never reads as a person.
   Only a live vehicle carries its name; a parked or old one is the square and its age, the name on hover or tap. */
.veh button{background:none;border:0;box-shadow:none;padding:0;gap:7px;align-items:center}
.veh .vk{position:relative;flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#1E3A2A;color:#F3EFE6;
  box-shadow:0 0 0 2px rgba(250,247,241,.95),0 8px 18px -8px rgba(0,0,0,.7);transition:background .3s,opacity .3s}
.veh .vk>svg{width:19px;height:19px}
.veh.principal .vk{background:var(--phm-p);color:#FFFBF2;box-shadow:0 0 0 2px rgba(250,247,241,.95),0 0 0 4.5px rgba(200,165,102,.35),0 8px 18px -8px rgba(0,0,0,.7)}
.veh .vd{position:absolute;inset:-9px;width:auto;height:auto;border-radius:0;background:none;display:none;color:#2C5A3C;pointer-events:none}
.veh.principal .vd{background:none;color:var(--phm-p)}
.veh .vd svg{width:100%;height:100%;display:block;transition:transform .6s var(--ease)}
.veh.moving .vd{display:block}
.veh .vd::after,.veh:not(.moving) .vd::after,.veh[data-st="live"] .vd::before{content:none}
.veh[data-st="live"] .vk::before{content:"";position:absolute;inset:-2px;border-radius:11px;border:1.5px solid #6FA17E;animation:vpulse 2.6s ease-out infinite;pointer-events:none}
.veh.principal[data-st="live"] .vk::before{border-color:var(--phm-pL)}
.veh .vl{display:flex;flex-direction:column;text-align:right;background:var(--phm-t);color:#F3EFE6;border:1px solid rgba(200,165,102,.4);border-radius:8px;padding:4px 9px;box-shadow:0 8px 20px -10px rgba(0,0,0,.7)}
.veh .vl b{font:500 11.5px/1.15 var(--sans);letter-spacing:.02em}.veh .vl small{font:400 10.5px/1.2 var(--sans);color:rgba(243,239,230,.72)}
.veh:not([data-st="live"]) .vl{display:none}
.veh:not([data-st="live"]) button:hover .vl,.veh:not([data-st="live"]) button:focus-visible .vl{display:flex}
.veh[data-st="stale"] .vk{background:#5E6152;color:#E9E4D8}.veh.principal[data-st="stale"] .vk{background:#8C7A52}
.veh[data-st="lost"] .vk{background:#6B6E66;color:#DCD8CE;box-shadow:0 0 0 2px rgba(250,247,241,.7);outline:1.5px dashed rgba(250,247,241,.7);outline-offset:2px}

.veh .va{position:absolute;right:15px;top:36px;transform:translateX(50%);white-space:nowrap;font:500 10px/1 var(--sans);letter-spacing:.03em;color:#4F534A;background:rgba(250,247,241,.92);border:1px solid rgba(79,83,74,.25);border-radius:999px;padding:3px 6px;pointer-events:none}
.veh .va:empty{display:none}
.veh.replay .vl{background:rgba(21,32,25,.82)}
.night .veh .vk{box-shadow:0 0 0 2px rgba(237,230,214,.85),0 8px 18px -8px rgba(0,0,0,.8)}
.discreet .veh .vl b{filter:blur(4px)}
@media (max-width:860px){.veh .vl small{display:none}}
@media (prefers-reduced-motion:reduce){.veh[data-st="live"] .vk::before{animation:none;opacity:.5}}

/* 212.8: groups of what is not live */
.phm-hid{visibility:hidden!important;pointer-events:none!important}
.veh.is-selected{z-index:9}
.veh.is-selected .vl{display:flex}
.veh.stacked::before{content:"";position:absolute;right:19px;top:calc(50% + var(--veh-line-top,0px));height:var(--veh-line-length,0px);border-left:1.5px solid #7A6A3E;pointer-events:none;z-index:-1}
.veh.stacked::after{content:"";position:absolute;right:16px;top:calc(50% - var(--veh-dy,0px) - 3px);width:6px;height:6px;border-radius:50%;background:#FAF7F1;border:1px solid #7A6A3E;pointer-events:none;z-index:-1}
.phm-cl{z-index:5}
.phm-cl button{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 6px;border-radius:12px;border:1px solid rgba(79,83,74,.3);background:rgba(250,247,241,.96);
  box-shadow:0 8px 20px -10px rgba(21,32,25,.6);cursor:pointer;color:#2B302B}
.phm-cl button:focus-visible{outline:2px solid var(--phm-pL);outline-offset:2px}
.phm-cs{display:flex;align-items:center}
.phm-cs i+i{margin-left:-6px}
.phm-cl .sq,.phm-gl .sq{display:inline-block;width:18px;height:18px;border-radius:5px;background:#5E6152;box-shadow:0 0 0 1.5px #FAF7F1}
.phm-cl .sq.p,.phm-gl .sq.p{background:#8C7A52}
.phm-cl .ci,.phm-gl .ci{display:inline-block;width:18px;height:18px;border-radius:50%;background:#FAF7F1;box-shadow:0 0 0 1.5px #5F6359,0 0 0 3px #FAF7F1}
.phm-cl .ci.p,.phm-gl .ci.p{box-shadow:0 0 0 1.5px var(--phm-p),0 0 0 3px #FAF7F1}
.phm-ct{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.phm-ct b{font:600 13px/1 var(--sans);font-variant-numeric:tabular-nums}.phm-ct small{font:400 10px/1.2 var(--sans);color:#5F6359;letter-spacing:.02em}
.phm-gl{list-style:none;margin:6px 0 0;padding:0 14px}
.phm-gl li{display:grid;grid-template-columns:22px 1fr;column-gap:8px;align-items:center;padding:7px 0;border-top:1px solid #EEE8DC}
.phm-gl li:first-child{border-top:0}
.phm-gl li i{grid-row:span 2}
.phm-gl b{font:500 13px/1.2 var(--sans)}.phm-gl small{font-size:11.5px;color:#5F6359}
.discreet .phm-gl b{filter:blur(4px)}
.phm-cl.hasp button{border-color:var(--phm-p);box-shadow:0 0 0 2px rgba(200,165,102,.35),0 8px 20px -10px rgba(21,32,25,.6)}
.phm-cl .sq.lv,.phm-gl .sq.lv{background:#1E3A2A}.phm-cl .sq.p.lv,.phm-gl .sq.p.lv{background:var(--phm-p)}
.phm-cl .ci.lv,.phm-gl .ci.lv{box-shadow:0 0 0 1.5px var(--phm-t),0 0 0 3px #FAF7F1}.phm-cl .ci.p.lv,.phm-gl .ci.p.lv{box-shadow:0 0 0 2px var(--phm-p),0 0 0 3.5px #FAF7F1}
.phm-ct small{display:flex;align-items:center;gap:4px}.phm-ct small i{width:6px;height:6px;border-radius:50%;background:#4E8A60}
.phm-cl.haslive .phm-ct small{color:#2F5D46;font-weight:500}

/* 2026-10-14 (Jarno): new map icons. One family: people are round, vehicles are rounded squares, both dark tiles with a
   light glyph and a parchment edge so they hold on every map style. The principal is always brass. */
.phm-t{width:34px;height:34px;background:radial-gradient(circle at 34% 28%,#335541,#152019 72%);color:#EFE9DC;letter-spacing:0;
  box-shadow:0 0 0 2px #FAF7F1,0 9px 18px -8px rgba(21,32,25,.75)}
.phm-t.phm-p{background:radial-gradient(circle at 34% 28%,#C9A35C,#8A651F 74%);color:#FFF8EA;box-shadow:0 0 0 2px #FAF7F1,0 0 0 5px rgba(200,165,102,.34),0 9px 18px -8px rgba(21,32,25,.75)}
.phm-t.phm-f{background:radial-gradient(circle at 34% 28%,#83A28A,#4E6C57 74%);color:#F4F1E8;box-shadow:0 0 0 2px #FAF7F1,0 9px 18px -8px rgba(21,32,25,.75)}
.phm-bw{position:absolute;inset:0;border-radius:50%;overflow:hidden;display:block}
.phm-bw svg{display:block;width:100%;height:100%;opacity:.94}
.phm-i{position:absolute;right:-8px;bottom:-5px;min-width:18px;height:15px;padding:0 4px;border-radius:8px;background:#FAF7F1;color:#152019;
  font:600 8.5px/15px var(--sans);letter-spacing:.05em;text-align:center;box-shadow:0 0 0 1.5px #152019,0 3px 7px -3px rgba(21,32,25,.6)}
.phm-t.phm-p .phm-i{color:#6B4F17;box-shadow:0 0 0 1.5px #9A7328,0 3px 7px -3px rgba(21,32,25,.6)}
.phm-t.phm-f .phm-i{color:#3F5A46;box-shadow:0 0 0 1.5px #4E6C57,0 3px 7px -3px rgba(21,32,25,.6)}
.phm.moving .phm-t::after{right:-2px;top:-2px;width:10px;height:10px;box-shadow:0 0 0 2px #FAF7F1}
.phm[data-st="stale"] .phm-t{background:#9C9F95;color:#F4F1E8;box-shadow:0 0 0 2px rgba(250,247,241,.9),0 6px 14px -8px rgba(21,32,25,.5);opacity:.95}
.phm[data-st="stale"] .phm-t.phm-p{background:#B9A57C;box-shadow:0 0 0 2px rgba(250,247,241,.9),0 0 0 4.5px rgba(200,165,102,.25)}
.phm[data-st="stale"] .phm-i{color:#5F6359;box-shadow:0 0 0 1.5px #9C9F95}
.night .phm-t{background:radial-gradient(circle at 34% 28%,#3E634D,#1C2E23 72%);box-shadow:0 0 0 2px #EDE6D6,0 9px 18px -8px rgba(0,0,0,.85)}
.night .phm-t.phm-p{background:radial-gradient(circle at 34% 28%,#D6B26B,#97702A 74%)}
.discreet .phm-i{filter:blur(3px)}
/* on board, inside a car pill: initials only, the silhouette would be too small to read */
.veh .vob .phm-t{width:20px;height:20px;background:#FAF7F1;color:#152019}
.veh .vob .phm-t.phm-p{background:#F6E9CC;color:#6B4F17}
.veh .vob .phm-bw{display:none}
.veh .vob .phm-i{position:static;display:block;min-width:0;height:auto;padding:0;background:none;box-shadow:none;font:600 8.5px/20px var(--sans);color:inherit;text-align:center}
.phmc .phm-t.mid{width:34px;height:34px}
/* vehicles */
.veh .vk{--vk-bg:#1E3A2A;width:34px;height:34px;border-radius:11px;background:linear-gradient(160deg,#2B4D39,#152019);color:#F3EFE6;
  box-shadow:0 0 0 2px #FAF7F1,0 9px 18px -8px rgba(0,0,0,.75)}
.veh .vk>svg{width:25px;height:25px}
.veh.principal .vk{--vk-bg:#8F6A23;background:linear-gradient(160deg,#C9A35C,#8A651F);color:#FFF8EA;box-shadow:0 0 0 2px #FAF7F1,0 0 0 5px rgba(200,165,102,.34),0 9px 18px -8px rgba(0,0,0,.75)}
.veh[data-st="live"] .vk::before{inset:-3px;border-radius:13px}
.veh[data-st="stale"] .vk{--vk-bg:#5E6152;background:#5E6152;color:#ECE7DB}.veh.principal[data-st="stale"] .vk{--vk-bg:#8C7A52;background:#8C7A52}
.veh[data-st="lost"] .vk{--vk-bg:#6B6E66;background:#6B6E66}
.veh .va{top:40px;right:17px}
.night .veh .vk{box-shadow:0 0 0 2px #EDE6D6,0 9px 18px -8px rgba(0,0,0,.85)}
.phm-a{top:42px}
/* 212.8.2: after 3 h. old = nothing new, may have moved (faded, brass tag); still = same spot, phone still sending */
.phm[data-mark="old"] .phm-t{opacity:.62}
.phm[data-mark="old"] .phm-a{color:#7A5B1E;font-weight:500}
.phm[data-mark="still"] .phm-a{color:#5F6359}
.phmc-m{margin:6px 0 0;font:400 12.5px/1.4 var(--sans);color:var(--ink)}
.phmc-m[data-mark="old"]{color:#7A5B1E}
/* 212.9: People chip, the same shape as Vehicles (#gpsChip) and directly above it; round dot for people */
#pplChip{position:absolute;right:18px;bottom:calc(var(--clockh) + 72px);z-index:7;display:flex;align-items:center;gap:10px;background:rgba(250,247,241,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);padding:9px 14px 9px 12px;box-shadow:0 10px 30px -14px rgba(21,32,25,.45);cursor:pointer;font:inherit;color:var(--ink);text-align:left}
#pplChip[hidden]{display:none}
#pplChip.solo{bottom:calc(var(--clockh) + 18px)}
#pplChip:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
#pplChip i{width:9px;height:9px;border-radius:50%;background:var(--sage);flex:none;box-shadow:0 0 0 2px rgba(250,247,241,.9),0 0 0 3.5px rgba(95,99,89,.45)}
#pplChip[data-st="live"] i{background:#4E7A5A;animation:cpulse 2s infinite}
#pplChip[data-st="stale"] i{background:#B07A1F}
#pplChip span{display:flex;flex-direction:column;line-height:1.15}
#pplChip b{font:500 12.5px/1.2 var(--sans)}
#pplChip small{font:400 11.5px/1.25 var(--sans);color:var(--sage)}
.ppl-m{margin:0 0 6px!important;font-size:12.5px!important;color:#7A5B1E}
@media (max-width:860px){#pplChip{bottom:62px;right:12px;padding:7px 11px}#pplChip.solo{bottom:12px}}

/* 212.11: "Initials and name" keeps the name beside the token; the age line still shows on tap */
.phm.phm-nm .phm-n{opacity:1;transform:translate(0,-50%)}.phm.phm-nm .phm-n small{display:none}.phm.phm-nm.sel .phm-n small,.phm.phm-nm button:hover .phm-n small{display:block}
/* 321: people on the same spot fan out with a thin leader back to the real point */
.phm-ld{position:absolute;left:50%;top:50%;width:var(--ld-len,0);height:0;border-top:1.5px dashed rgba(21,32,25,.55);transform-origin:0 0;transform:rotate(var(--ld-ang,0));pointer-events:none;z-index:-1}
.phm-ld::after{content:"";position:absolute;right:-3px;top:-3.75px;width:6px;height:6px;border-radius:50%;background:#1D2320;box-shadow:0 0 0 1.5px #fff}
.phm-ld[hidden]{display:none}