/* «Карта · История» (D-212) — ported from design-v2/css/17-map.css (the cell p-trips.html and the prototype map-proto.html).
   The strip, the stage and the five state colours are app.css's (slice 1); this file is the rest: the car chip, the day chip with its calendar,
   the markers of the route, the player with its timeline and moment card, the story, the week, the stop card, the phone. The cell's
   radio-driven states are gone: the product holds the state in the script, and no rule here depends on a radio. */
:where(#p-trips) button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-align:inherit}
:where(#p-trips) summary{font:inherit}
#p-trips .mp-stage{height:clamp(340px,calc(100vh - 294px),800px);border-radius:0}
.mp-load{padding:24px;text-align:center;color:var(--tx3)}

.mp-pick{display:flex;align-items:center;gap:8px;flex:none;height:36px;min-width:190px;padding:0 12px;border-radius:var(--r-s);border:1px solid var(--line-s);background:var(--s2);color:var(--tx1);cursor:pointer}
.mp-pick b{font-family:var(--mono);font-size:13px;letter-spacing:.02em}
.mp-pick .sp{margin-left:auto;color:var(--tx3)}
.mp-dot{width:10px;height:10px;border-radius:50%;background:var(--k);flex:none}
.mp-dayg{display:flex;align-items:center;gap:4px;flex:none}
.mp-nb{display:grid;place-items:center;width:32px;height:36px;border-radius:var(--r-s);border:1px solid var(--line-s);background:var(--s2);color:var(--tx1);font-size:18px;line-height:1;cursor:pointer}
.mp-dd{position:relative}
.mp-day{list-style:none;display:flex;flex-direction:column;justify-content:center;gap:3px;height:36px;min-width:150px;padding:3px 12px 0;border-radius:var(--r-s);border:1px solid var(--line-s);background:var(--s2);cursor:pointer}
.mp-day::-webkit-details-marker{display:none}
.mp-day .dd{font-weight:650;font-size:13px;white-space:nowrap;line-height:1.1}
.mp-day .yr{text-decoration:none}
.mp-day i{display:block;height:4px;border-radius:2px;background:var(--line)}
.mp-sp{flex:1}
.mp-ex{margin-left:auto;height:32px;padding:0 13px;border-radius:var(--r-s);border:1px solid var(--line-s);background:var(--s2);color:var(--tx2);font-size:12px;font-weight:600;cursor:pointer}
.mp-pick{cursor:pointer}
/* calendar popover: every day carries km and a 4-state mini-strip; the day is chosen by sight */
.mp-cal{position:absolute;top:calc(100% + 8px);left:0;z-index:30;width:430px;padding:12px;border-radius:14px}
.mp-calh{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mp-calh b{flex:1;font-size:14px}
.mp-cn{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--line-s);background:var(--s2);color:var(--tx1);font-size:16px;cursor:pointer}
.mp-calg{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mp-wd{font-size:10px;color:var(--tx3);text-align:center;font-weight:650;text-transform:uppercase;letter-spacing:.06em}
.mp-cd{position:relative;display:flex;flex-direction:column;gap:2px;height:58px;padding:5px 5px 0;border-radius:8px;border:1px solid var(--line);background:var(--s2);color:var(--tx1);text-align:left;cursor:pointer}
.mp-cd .n{font-size:12px;font-weight:700}
.mp-cd .km{font-family:var(--mono);font-size:10px;color:var(--tx2)}
.mp-cd .st{position:absolute;left:4px;right:4px;bottom:4px;height:8px;border-radius:3px;background:var(--line)}
.mp-cd .ald{position:absolute;right:4px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--c-alert)}
.mp-cd.sel{border:2px solid var(--tx1)}
.mp-cd.dis{opacity:.35;pointer-events:none}
.mp-cd.tod .n::after{content:"●";color:var(--c-move);margin-left:3px;font-size:8px}
.mp-calf{display:flex;gap:8px;margin-top:10px}
.mp-cb{flex:1;display:flex;align-items:center;justify-content:center;height:36px;border-radius:var(--r-s);border:1px solid var(--line-s);background:var(--s2);color:var(--tx1);font-weight:600;font-size:12.5px;cursor:pointer}
/* ───── the player bar, 150 px ───── */
.mp-player{position:relative;height:150px;padding:8px 14px 6px;border-radius:0 0 var(--r) var(--r);display:flex;flex-direction:column;gap:6px;border-top:0}
.mp-prow{display:flex;align-items:center;gap:8px;height:44px;flex:none}
.mp-play{width:44px;height:44px;border-radius:50%;background:var(--tx1);color:var(--bg);display:grid;place-items:center;flex:none;cursor:pointer}
.mp-play svg{width:20px;height:20px;fill:currentColor}
.mp-skip{width:36px;height:36px;border-radius:var(--r-s);border:1px solid var(--line-s);background:var(--s2);color:var(--tx1);font-size:14px;cursor:pointer}
.mp-spd{display:flex;border:1px solid var(--line-s);border-radius:var(--r-s);overflow:hidden}
.mp-spd button{height:36px;min-width:50px;font-family:var(--mono);font-weight:650;color:var(--tx2);cursor:pointer}
.mp-spd button.on{background:var(--s3);color:var(--tx1)}
.mp-time{font-family:var(--mono);font-size:18px;font-weight:700;margin-left:6px}
.mp-fr{font-family:var(--mono);font-size:11.5px;color:var(--tx3)}
.mp-win{margin-left:auto;height:28px;display:flex;align-items:center;padding:0 12px;border-radius:999px;border:1px dashed var(--tx3);font-size:11.5px;font-weight:600;color:var(--tx2);cursor:pointer}
.mp-tl{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:4px;user-select:none;cursor:ew-resize}
.mp-pr{position:relative;height:26px;flex:none;border-radius:6px;background:var(--s2);border:1px solid var(--line);overflow:hidden}
.mp-pr svg{position:absolute;inset:0;width:100%;height:100%}
.mp-pr small{position:absolute;left:5px;font-family:var(--mono);font-size:9px;line-height:1;color:var(--tx3)}
.mp-pr .hi{top:2px}.mp-pr .lo{bottom:2px}
.pl-line{fill:none;stroke:var(--tx2);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.pl-loss{fill:none;stroke:var(--c-alert);stroke-width:2.6;vector-effect:non-scaling-stroke}
.mp-lane{position:relative;height:24px;flex:none;border-radius:6px;overflow:hidden;background:var(--s2);border:1px solid var(--line)}
.mp-lane i{position:absolute;top:0;bottom:0;background:var(--k)}
.mp-lane i.mk-silent{background:repeating-linear-gradient(135deg,var(--c-silent) 0 4px,transparent 4px 8px)}
.mp-lane i.rf{top:58%;background:var(--c-move);border-top:2px solid #fff}
.mp-lane i.rf.mk-alert{background:var(--c-alert)}
.mp-lane i.gp{bottom:auto;height:5px;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 5px);opacity:.85}
.mp-lane i.fut{background:repeating-linear-gradient(135deg,var(--line-s) 0 2px,transparent 2px 6px)}
.mp-alk{position:absolute;top:30px;height:24px;width:3px;margin-left:-1px;background:var(--c-alert);pointer-events:none}
.mp-alk::before{content:"";position:absolute;left:-5px;top:-6px;border:6.5px solid transparent;border-top-color:var(--c-alert);border-bottom:0}
.mp-ticks{position:relative;height:14px;flex:none;font-family:var(--mono);font-size:10px;color:var(--tx3)}
.mp-ticks span{position:absolute;top:0;transform:translateX(-50%)}
.mp-ticks span:first-of-type{transform:none}.mp-ticks span:last-of-type{transform:translateX(-100%)}
.mp-ticks .dt{position:absolute;top:0;font-style:normal;margin-left:20px;color:var(--tx2);font-weight:600}
.mp-hd{position:absolute;left:var(--hx);top:0;bottom:0;width:0;pointer-events:none}
.mp-hd::before{content:"";position:absolute;left:-1px;top:20px;bottom:14px;width:2px;background:var(--tx1);box-shadow:0 0 0 1px var(--bg)}
.mp-hd b{position:absolute;left:-12px;top:30px;width:24px;height:24px;border-radius:50%;background:var(--tx1);box-shadow:0 0 0 3px var(--bg),var(--shadow)}
/* the moment card floats over the handle: state word, time, five facts, the driver */
.mp-mom{position:absolute;left:clamp(130px,var(--hx),calc(100% - 130px));bottom:calc(100% + 70px);transform:translateX(-50%);width:252px;padding:9px 11px;border-radius:12px;z-index:9;pointer-events:none}
.mp-mom .mhd{display:flex;align-items:center;gap:8px}
.mp-mom .tt{margin-left:auto;font-family:var(--mono);font-size:13px}
.mp-pl{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:999px;background:var(--k);color:#fff;font-size:11.5px;font-weight:650;white-space:nowrap}
.mp-pl.mk-engine{color:#241a05}
.mp-mom .mg{display:grid;grid-template-columns:repeat(3,1fr);gap:5px 8px;margin-top:7px}
.mp-mom .mg b{display:block;font-family:var(--mono);font-size:12px;margin-top:1px;white-space:nowrap}
.mp-mom .dr{margin-top:6px;font-size:11.5px;color:var(--tx2);font-weight:600}
/* ───── the story: one 44-px line per event ───── */
.mp-story{margin-top:10px;border-radius:var(--r);background:var(--s1);border:1px solid var(--line);box-shadow:var(--shadow);padding-bottom:2px}
.mp-sth{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px}
.mp-sth .tot{display:flex;gap:18px;flex-wrap:wrap;font-size:15px;font-weight:700}
.mp-sth .tot span{font-family:var(--mono)}
.mp-sth .tot s{text-decoration:none;color:var(--tx3);font-weight:500;font-family:var(--font)}
.mp-ln{position:relative;display:grid;grid-template-columns:6px minmax(0,1fr) minmax(120px,auto) 118px;gap:12px;align-items:center;min-height:44px;padding-right:16px;border-top:1px solid var(--line)}
.mp-ln > i{align-self:stretch;background:var(--k)}
.mp-ln:hover{background:var(--s2)}
.mp-ln.cur{background:var(--s2)}
.mp-ln.sub{padding-left:22px}
.mp-lnb{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;align-items:center;text-align:left;padding:8px 0;color:var(--tx1);cursor:pointer}
.mp-lnb::after{content:"";position:absolute;inset:0}
.mp-lnb .tm{font-family:var(--mono);font-size:12.5px;color:var(--tx2)}
.mp-lnb .tx{font-weight:650}
.mp-ln.sub .tx{font-weight:600}
.mp-ln .ff{font-family:var(--mono);font-size:12.5px;color:var(--tx2);text-align:right}
.mp-pact,.mp-nw{position:relative;z-index:1;height:26px;padding:0 11px;border-radius:999px;border:1px solid var(--ok-b);background:var(--ok-d);color:var(--ok);font-size:11px;font-weight:650;white-space:nowrap;cursor:pointer}
.mp-nw{display:inline-flex;align-items:center;border-color:var(--line-s);background:var(--s2);color:var(--tx2)}
.mp-gh{display:none;padding:8px 16px 4px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);border-top:1px solid var(--line)}
.mp-story[data-groups="on"] .mp-gh{display:block}

/* the stop card (night state): the act «Это наше место» is reachable from the disc */
.mp-stopc{position:absolute;z-index:7;width:268px;padding:10px 12px;border-radius:12px}
.mp-stopc .h{display:flex;align-items:center;gap:8px;font-size:12.5px}
.mp-stopc .h i{width:11px;height:11px;border-radius:50%;background:var(--k);flex:none}
.mp-stopc .x{margin-left:auto}
.mp-stopc .nm{margin-top:5px;font-weight:650}
.mp-stopc .tm{margin-top:2px;font-family:var(--mono);font-size:12px;color:var(--tx2)}
.mp-stopc .ff{margin-top:5px;font-family:var(--mono);font-size:12px;line-height:1.5}
.mp-stopc .ff b{color:var(--k)}
.mp-stopc .mp-pact{margin-top:8px}
.mp-week{border-radius:0 0 var(--r) var(--r);background:var(--s1);border:1px solid var(--line);border-top:0;box-shadow:var(--shadow);padding-bottom:6px}
button.mp-wk{width:100%;text-align:left;color:var(--tx1);cursor:pointer}
.mp-wk{display:grid;grid-template-columns:90px minmax(0,1fr) 70px;gap:12px;align-items:center;min-height:44px;padding:8px 16px;border-top:1px solid var(--line);cursor:pointer}
.mp-wk b{font-family:var(--mono);font-size:12.5px}
.mp-wk .st{height:28px;border-radius:5px;background:var(--line)}
.mp-wk .kmv{text-align:right;font-family:var(--mono);color:var(--tx2)}
.mp-wk:hover,.mp-wk.sel{background:var(--s2)}
.mp-wax{display:grid;grid-template-columns:90px minmax(0,1fr) 70px;gap:12px;padding:0 16px 4px;font-family:var(--mono);font-size:10px;color:var(--tx3)}
.mp-wax .ax{display:flex;justify-content:space-between}
.mod .mp-find{flex:none;width:100%;margin-bottom:10px}
/* point letters on the route (REQ-MOV-065): one badge per place, «B1 B2» where a stop gave two points of one letter */
.mp-pt{pointer-events:none}
.mp-pt rect{fill:var(--tx1);stroke:var(--s1);stroke-width:1.5}
.mp-pt text{fill:var(--s1);font-family:var(--font);font-size:11.5px;font-weight:800}
/* the stop threshold named beside the story totals (REQ-UIX-092: the threshold that splits routes is named by a number) */
.mp-thr{font-size:12px;color:var(--tx3);font-weight:500}

/* ───── the route, the stops, the badges: markers of the real map ───── */
.hl{fill:none;stroke-linecap:round;stroke-linejoin:round}
.hl-f,.hl-b{stroke:var(--c-move);stroke-width:5}
.hl-f{opacity:.3}
.hl-g{stroke:var(--tx3);stroke-width:4}
/* the words on the grey straight line of a lost fix (OD-1): «GPS потерян · N мин» */
.hk-gpsl{display:block;position:relative;transform:translate(-50%,-50%);padding:3px 8px;border-radius:10px;background:var(--s1);border:1.2px solid var(--tx3);color:var(--tx2);font:650 11px/1 var(--font);white-space:nowrap;pointer-events:auto}
.hl-s{stroke:var(--c-silent);stroke-width:4}
.hmk{width:0;height:0;overflow:visible}
.hmk > *{position:absolute;left:calc(-1 * var(--ax,0px));top:calc(-1 * var(--ay,0px))}
.hk-stop{display:block;position:relative;cursor:pointer}
.hk-disc{display:grid;place-items:center;align-content:center;border-radius:50%;background:var(--k);border:2px solid #fff;color:#fff;font-family:var(--font);box-sizing:border-box}
.hk-disc b{font-size:12.5px;line-height:1;font-weight:700}
.hk-disc small{font-size:8.5px;line-height:1;color:rgba(255,255,255,.88)}
.hk-stop.mk-engine .hk-disc,.hk-stop.mk-engine .hk-disc small{color:#241a05}
.hk-stop.dim{opacity:.72}
.hk-pill{position:absolute;top:50%;display:flex;align-items:center;height:20px;padding:0 7px;border-radius:10px;border:1.2px solid #fff;color:#fff;font:650 11px/1 var(--font);white-space:nowrap;transform:translateY(-50%)}
.hk-loss{background:var(--c-alert)}
.hk-ref{background:var(--c-move);font-weight:700;font-size:11.5px}
.hk-pt{display:block;white-space:nowrap}
.hk-pt b{display:inline-block;min-width:21px;height:20px;padding:0 5px;border-radius:6px;background:var(--tx1);color:var(--s1);border:1.5px solid var(--s1);font:800 11.5px/17px var(--font);text-align:center;box-sizing:border-box}
.hk-car{display:block;pointer-events:none}
.hk-car .mkp-wrap{display:block;position:relative;width:40px;height:40px}
.hk-car .mkp-lbl{display:block}
.hmk-ref{z-index:610}
.mp-place-sym{display:block}
.mp-page .leaflet-marker-icon.hmk{background:none;border:0}
#p-trips:has(.mp-lay input:not(:checked)) .mp-place-wrap{display:none}
.mp-lay.mp-nolay{display:none}
/* CD-103: the history map's right-edge control column - «← Назад» (only when a page is behind), «Места», the zoom group - the live map's column (OD-40) */
#p-trips .mp-ctl{position:absolute;top:12px;right:14px;z-index:6;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
#p-trips .mp-ctl .mp-lay,#p-trips .mp-ctl .mp-zoom{position:static}
#p-trips .mp-ctl .mp-back{display:flex;align-items:center;height:30px;padding:0 12px;margin:0;border-radius:999px;white-space:nowrap}

/* the lane's note that the stored fillings are built only up to a cut (the writer is stalled) */
.mp-lane i.nb{bottom:auto;height:4px;background:repeating-linear-gradient(90deg,var(--wn) 0 3px,transparent 3px 6px)}

/* the stop card (the cell's `.mp-stopc`), placed by the script beside its disc */
.mp-stopc[hidden]{display:none}
.mp-stopc .h{margin-bottom:0}

/* the empty day and the loading day */
.mp-empty{margin-top:10px}

/* the picker (m-pickveh): the product's window with the cell's search over its table */
.dlg .mp-pickt{width:100%;border-collapse:collapse;margin-top:2px}
.dlg .mp-pickt th{text-align:left;font-size:10.5px;color:var(--tx3);font-weight:650;text-transform:uppercase;letter-spacing:.06em;padding:4px 8px}
.dlg .mp-pickt td{padding:7px 8px;border-top:1px solid var(--line);cursor:pointer}
.dlg .mp-pickt tr.go:hover td,.dlg .mp-pickt tr.sel td{background:var(--s2)}
.dlg .mp-pickt td b{font-family:var(--mono)}
.dlg .mp-pickt td.num{font-family:var(--mono);color:var(--tx2);white-space:nowrap}
.dlg .mp-pickbox{max-height:52vh;overflow:auto}
.dlg .mp-find{flex:none;width:100%;margin-bottom:10px}


@media (max-width:620px){

  .mp-pick{min-width:0;flex:0 0 auto;padding:0 8px;gap:6px;height:36px}
  .mp-pick b{font-size:11px;letter-spacing:0}.mp-pick .sp,.mp-pick .mp-dot{display:none}
  .mp-dayg{flex:1;min-width:0}
  .mp-dayg .mp-dd{flex:1;min-width:0}
  .mp-nb{display:none}
  .mp-day{min-width:0;padding:3px 7px 0}.mp-day .dd{font-size:12px}
  .mp-vw{display:none}
  .mp-day .yr{display:none}
  #p-trips .mp-stage{height:clamp(260px,46svh,420px)}
  .mp-lay{display:none}
  #p-trips .mp-zoom{display:none}
  #p-trips .mp-ctl{top:12px;left:8px;right:auto}
  .mp-cal{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;border-radius:16px 16px 0 0;z-index:80}
  .mp-cd{height:54px}
  .mp-player{height:132px;padding:6px 8px 4px;gap:4px}
  .mp-prow{height:40px;gap:5px}
  .mp-play{width:44px;height:44px;margin-top:-2px}
  .mp-skip{width:32px;height:34px}
  .mp-spd button{min-width:36px;height:34px;font-size:12px}
  .mp-time{font-size:16px;margin-left:2px}
  .mp-fr{display:none}
  .mp-win{height:26px;padding:0 8px;font-size:10.5px;overflow:hidden;white-space:nowrap}
  .mp-pr{height:20px}
  .mp-lane{height:40px}
  .mp-ticks{height:12px;font-size:9px}
  .mp-ticks .m,.mp-ticks .dt{display:none}
  .mp-alk{top:24px;height:40px}
  .mp-hd::before{top:14px;bottom:12px}
  .mp-hd b{left:-22px;top:20px;width:44px;height:44px;opacity:.92}
  .mp-mom{left:0;right:0;width:auto;bottom:calc(100% + 58px);transform:none;padding:6px 10px;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
  .mp-mom .mhd{flex:none}
  .mp-mom .mg{display:flex;flex-wrap:wrap;gap:0 10px;margin:0;flex:1 1 100%;order:3}
  .mp-mom small{display:none}
  .mp-mom .mg b{font-size:11.5px}
  .mp-mom .dr{margin:0;order:2;margin-left:auto;font-size:11px}
  .mp-sth{padding:10px 12px}.mp-sth .tot{font-size:13px;gap:10px}
  .mp-ln{grid-template-columns:5px minmax(0,1fr);gap:2px 10px;padding:6px 10px 6px 0}
  .mp-ln.sub{padding-left:14px}
  .mp-lnb{grid-template-columns:1fr;gap:1px;padding:0}
  .mp-lnb .tx{white-space:normal}
  .mp-ln .ff{text-align:left;grid-column:2}
  .mp-pact,.mp-nw{grid-column:2;justify-self:start}
  .mp-wk,.mp-wax{grid-template-columns:70px minmax(0,1fr) 50px;padding-left:10px;padding-right:10px}
  .mp-stopc{left:6px!important;right:6px;top:auto!important;bottom:8px;width:auto}
  .mp-strip .mp-pick{flex:0 0 auto}
  .hk-disc b{font-size:11px}
}