/* The day's map and the trip's map (daymap.js) and the Day header's "Map". Tokens only, so light and charcoal follow
   the app; every tap is 44 px. The tiles' own look is set in daymap.js (palette), from the same tokens. */

/* the Day header: Map beside the Outfits pill, the same raised pill (raised means tappable) */
.dy-dayhead-acts{display:flex;align-items:center;gap:6px;flex:none;}
.dy-mapbtn .of-pill-face{gap:6px;padding:0 14px 0 11px;}
.dy-mapbtn .of-pill-face .d-ic{width:16px;height:16px;flex:none;}

/* the sheet: the map takes the room the rows under it leave */
.dm-sheet .d-sheet-body{display:flex;flex-direction:column;gap:12px;-webkit-mask-image:none;mask-image:none;padding-bottom:calc(12px + env(safe-area-inset-bottom));}
.dm-map{position:relative;flex:1 1 auto;min-height:300px;border-radius:var(--r-md);overflow:hidden;background:var(--well);box-shadow:var(--in);isolation:isolate;font-family:var(--font);}
.dm-map .maplibregl-canvas{outline:none;}
.dm-map .maplibregl-canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--brass-ink);}

/* pins: a 44 px tap around a 28 px dot; the bed is ink, the stops carry the day's color */
.dm-pin{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);padding:0;border:0;background:none;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.dm-dot{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;box-sizing:border-box;border-radius:50%;background:var(--ground);color:var(--ink);border:2px solid var(--dm-c,var(--brass-ink));box-shadow:0 1px 3px rgba(0,0,0,.30);font:600 .8125rem/1 var(--font);font-variant-numeric:tabular-nums;transition:transform 120ms var(--ease);}
.dm-pin-base .dm-dot{width:32px;height:32px;background:var(--ink);color:var(--ground);border-color:var(--ground);}
.dm-pin-base .dm-dot .d-ic{width:17px;height:17px;}
.dm-pin-open .dm-dot{border-style:dashed;}
.dm-tag{position:absolute;left:calc(50% + 10px);top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;height:26px;padding:0 10px 0 12px;border-radius:0 var(--r-pill) var(--r-pill) 0;background:var(--ground);color:var(--ink);border:2px dashed var(--dm-c,var(--brass-ink));border-left:0;box-shadow:0 1px 3px rgba(0,0,0,.22);font:600 .8125rem/1 var(--font);white-space:nowrap;z-index:-1;}
.dm-pin:active .dm-dot{transform:scale(.92);}
/* the pin whose sheet is open */
.dm-pin.is-on .dm-dot{background:var(--dm-c,var(--brass-ink));color:var(--ground);border-color:var(--ground);}
.dm-pin-base.is-on .dm-dot{background:var(--brass-ink);color:var(--ground);}
.dm-pin:focus-visible{outline:none;}
.dm-pin:focus-visible .dm-dot{outline:2px solid var(--brass-ink);outline-offset:2px;}
.dm-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;box-sizing:border-box;border-radius:50%;background:var(--ground);color:var(--dm-c,var(--ink));border:1.5px solid var(--dm-c,var(--ink-2));box-shadow:0 1px 3px rgba(0,0,0,.22);pointer-events:none;}
.dm-badge .d-ic{width:14px;height:14px;}

/* the still drawing (no map library): the same pins and lines on the plain ground */
.dm-still{position:absolute;inset:0;width:100%;height:100%;background:var(--well);}
.dm-still polyline{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.dm-still .dm-still-case{stroke:var(--well);stroke-width:8;opacity:.85;}
.dm-still .dm-still-line{stroke:var(--brass-ink);stroke-width:3.5;}
.dm-still .dm-still-travel{stroke-dasharray:4 5;stroke-linecap:butt;}
.dm-still .dm-still-faint{stroke:var(--ink-2);stroke-width:1.5;opacity:.4;stroke-dasharray:3 5;}
.dm-still-pin{position:absolute;transform:translate(-50%,-50%);z-index:1;}

/* the map's credits, quiet and readable in both themes */
.dm-map .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib{margin:0;padding:2px 8px;border-radius:var(--r-sm) 0 0 0;background:color-mix(in srgb,var(--ground) 84%,transparent);color:var(--ink-2);font:400 .6875rem/1.5 var(--font);}
.dm-map .maplibregl-ctrl-attrib a{color:var(--ink-2);}

/* the trip map's day chips: a row that runs off the edge (a soft cut, never a bar) */
.dm-chips{flex:none;display:flex;gap:8px;overflow-x:auto;margin:-4px calc(-1 * var(--gutter)) 0;padding:6px var(--gutter) 6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);}
.dm-chips::-webkit-scrollbar{display:none;}
.dm-chip{flex:none;min-height:var(--tap);}
.dm-swatch{width:10px;height:10px;border-radius:50%;background:var(--dm-c,var(--brass-ink));flex:none;}
.dm-swatch[hidden]{display:none;}

/* under the map: Directions for the day, then the quiet lines */
.dm-under{flex:none;display:flex;flex-direction:column;gap:8px;}
.dm-dir{display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:10px 16px;border-radius:var(--r-pill);background:var(--ground);box-shadow:var(--e1);color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent;}
.dm-dir>.d-t-body{flex:1 1 auto;min-width:0;}
a.dm-dir:active{box-shadow:var(--in);}
.dm-dir-split{flex-wrap:wrap;row-gap:4px;padding:6px 0 0;border-radius:0;background:none;box-shadow:none;}
.dm-parts{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 0;}
.dm-parts .d-chip{text-decoration:none;min-height:var(--tap);}
.dm-note{margin:0;padding:0 4px;}
.dm-note[hidden]{display:none;}

/* a pin's sheet */
.dm-info{display:flex;flex-direction:column;gap:10px;padding-bottom:4px;}
.dm-addr,.dm-line,.dm-vote{margin:0;}
.dm-going{display:flex;align-items:center;gap:10px;}
.dm-acts{display:flex;gap:10px;}
.dm-acts .dm-act{flex:1 1 0;min-width:0;padding:10px 8px;gap:6px;font-size:.9375rem;text-decoration:none;white-space:nowrap;}

@media (prefers-reduced-motion:reduce){
  .dm-dot{transition:none;}
  .dm-pin:active .dm-dot{transform:none;opacity:.8;}
}