/* 日本 2027 — kaart per dag (jp27-kaart.js). Own classes only: .daymap*, .dm-*.
   Spec: reports/design.md §9c + DESIGN.md "Day map". Tokens come from the core; fallbacks for tokens it may add later.
   Leaflet's own CSS is injected (lazily) in front of this file; selectors below are scoped to .daymap__frame so they
   also win on specificity. Light theme only. */

/* ---------- slot (the core renders it hidden; the script un-hides it for days with valid geo data) ---------- */
.daymap{
  position:relative;z-index:0;isolation:isolate;display:block;
  height:340px;margin:6px 0 24px;
  border:1px solid var(--ink-14,rgba(20,16,14,.14));border-radius:2px;overflow:hidden;
  background-color:var(--washi-2,#e9e0d1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cg fill='none' stroke='%2314100e' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M0 30a15 15 0 0130 0 15 15 0 0130 0'/%3E%3Cpath d='M0 22a15 15 0 0130 0 15 15 0 0130 0'/%3E%3Cpath d='M0 14a15 15 0 0130 0 15 15 0 0130 0'/%3E%3C/g%3E%3C/svg%3E");
}
@media (min-width:961px){.daymap{height:360px}}
@media (max-width:640px){
  /* edge to edge inside the day card; --dm-bleed is the measured side padding of .day__body */
  .daymap{height:240px;margin:4px calc(-1 * var(--dm-bleed,14px)) 20px;border-left:0;border-right:0;border-radius:0}
}
@media print{.daymap{display:none!important}}

/* ---------- frame: map + controls (moves into a <dialog> for "Vergroot") ---------- */
.daymap__frame{
  position:absolute;inset:0;overflow:hidden;
  background:var(--washi,#f4eee4);color:var(--sumi,#14100e);
  font:500 13px/1.4 var(--sans,'Inter',system-ui,sans-serif);
  -webkit-tap-highlight-color:transparent;
}
.daymap__frame.is-loading,.daymap__frame.is-offline{
  background-color:var(--washi-2,#e9e0d1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cg fill='none' stroke='%2314100e' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M0 30a15 15 0 0130 0 15 15 0 0130 0'/%3E%3Cpath d='M0 22a15 15 0 0130 0 15 15 0 0130 0'/%3E%3Cpath d='M0 14a15 15 0 0130 0 15 15 0 0130 0'/%3E%3C/g%3E%3C/svg%3E");
}
.daymap__map{position:absolute;inset:0}
.daymap__frame .leaflet-container{background:transparent;font:inherit;line-height:1.4}
.daymap__frame .leaflet-container:focus{outline:none}
.daymap__frame .leaflet-container:focus-visible{outline:2px solid var(--shu,#a83e26);outline-offset:-3px}

/* tiles: GSI 淡色地図 softened, OSM greyscaled; a washi layer multiplies over both (multiply on the layer, not the tiles) */
.daymap--gsi .dm-base{opacity:.82;filter:saturate(.7)}
.daymap--osm .dm-base{filter:grayscale(.85) contrast(.9) brightness(1.06)}
.dm-washi-layer{mix-blend-mode:multiply}
.dm-washi.is-ready{background:#f4eee4}

/* route */
.daymap__frame .dm-route{stroke:var(--shu,#a83e26)}

/* ---------- hanko pins ---------- */
.dm-mk{width:0!important;height:0!important;outline:none}
.dm-pin{
  position:absolute;left:0;top:0;box-sizing:border-box;
  display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;
  border:2px solid var(--shu,#a83e26);border-radius:4px;background:#fbf7f0;color:var(--shu,#a83e26);
  font:700 13px/1 var(--sans,'Inter',system-ui,sans-serif);font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap;
  transform:translate(-50%,-50%) rotate(-2.5deg);
  box-shadow:0 2px 6px rgba(20,16,14,.22);cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.dm-pin::after{content:"";position:absolute;inset:-6px}
@media (pointer:coarse){.dm-pin::after{inset:-9px}}
.dm-pin--wide{padding:0 7px}
.dm-pin--end{background:var(--shu,#a83e26);color:#fbf7f0}
.dm-pin--now{background:var(--shu,#a83e26);color:#fbf7f0;box-shadow:0 0 0 5px rgba(168,62,38,.24),0 2px 6px rgba(20,16,14,.22)}
@media (hover:hover){
  .dm-mk:hover .dm-pin{background:#fff}
  .dm-mk:hover .dm-pin--end,.dm-mk:hover .dm-pin--now{background:var(--shu-deep,#8f3320);border-color:var(--shu-deep,#8f3320)}
}
.dm-mk:active .dm-pin{transform:translate(-50%,-50%) translateY(1px) rotate(-2.5deg)}
.dm-mk:focus-visible .dm-pin{outline:2px solid var(--shu,#a83e26);outline-offset:3px}

/* ---------- controls ---------- */
.dm-top{
  position:absolute;z-index:1001;top:10px;left:10px;right:58px;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none;
}
@media (pointer:coarse){.dm-top{right:10px}}
.dm-top > *{pointer-events:auto}
.dm-pill{
  position:relative;display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:32px;padding:0 10px;
  border:1px solid var(--ink-14,rgba(20,16,14,.14));border-radius:2px;background:rgba(251,247,240,.95);
  color:var(--ink-70,rgba(20,16,14,.72));font:500 12.5px/1.2 var(--sans,'Inter',system-ui,sans-serif);
  cursor:pointer;box-shadow:0 2px 8px -4px rgba(20,16,14,.3);
  transition:border-color .15s ease,color .15s ease;
}
.dm-pill::after{content:"";position:absolute;inset:-6px -2px}
.dm-pill .dm-ic{width:13px;height:13px;flex:0 0 auto;color:var(--shu,#a83e26)}
.dm-pill .dm-ic--dir{transition:none}
.dm-pill__n{flex:0 0 auto;font-weight:700;color:var(--shu,#a83e26);font-variant-numeric:tabular-nums}
.dm-pill__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sumi,#14100e)}
.dm-pill__d{flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.dm-pill__d::before{content:"·";margin-right:6px}
.dm-pill--reset .dm-pill__t{font-weight:600}
@media (hover:hover){.dm-pill:hover{border-color:var(--shu,#a83e26);color:var(--shu,#a83e26)}}
.dm-pill:active{transform:translateY(1px)}

.dm-bar{position:absolute;z-index:1001;right:10px;bottom:10px;display:flex;gap:8px}
/* open popup: de knoppen onderaan wijken, zodat ze de popup niet bedekken (in de kleine gsm-kaart) */
.daymap__frame.dm-popopen .dm-bar{visibility:hidden;opacity:0}
.dm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;min-width:40px;padding:0 12px;
  border:1px solid var(--ink-14,rgba(20,16,14,.14));border-radius:2px;background:rgba(251,247,240,.95);
  color:var(--sumi,#14100e);font:600 13px/1 var(--sans,'Inter',system-ui,sans-serif);text-decoration:none;white-space:nowrap;
  cursor:pointer;box-shadow:0 2px 8px -4px rgba(20,16,14,.3);
  transition:border-color .15s ease,color .15s ease,background-color .15s ease;
}
.dm-btn[hidden]{display:none}
.dm-btn .dm-ic{width:15px;height:15px;flex:0 0 auto}
a.dm-btn,a.dm-btn:visited{color:var(--sumi,#14100e)}
@media (pointer:coarse){.dm-btn{min-height:44px;min-width:44px}}
@media (hover:hover){.dm-btn:hover,a.dm-btn:hover{border-color:var(--shu,#a83e26);color:var(--shu,#a83e26)}}
.dm-btn:active{transform:translateY(1px)}
@media (max-width:640px){.dm-btn--full{padding:0}.dm-btn--full .dm-btn__t{display:none}}

.dm-close{position:absolute;z-index:1002;top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));min-height:44px}

.dm-offline{
  position:absolute;z-index:1001;left:10px;bottom:62px;display:inline-flex;align-items:center;gap:7px;max-width:calc(100% - 20px);
  min-height:30px;padding:0 10px;border:1px solid var(--ink-14,rgba(20,16,14,.14));border-radius:2px;background:rgba(251,247,240,.95);
  color:var(--ink-70,rgba(20,16,14,.72));font:500 12.5px/1.25 var(--sans,'Inter',system-ui,sans-serif);
}
.dm-offline[hidden]{display:none}
.dm-offline .dm-ic{width:14px;height:14px;flex:0 0 auto;color:var(--shu,#a83e26)}

.dm-btn:focus-visible,.dm-pill:focus-visible,.dm-pop__route:focus-visible,
.daymap__frame .leaflet-bar a:focus-visible,.daymap__frame a.leaflet-popup-close-button:focus-visible{outline:2px solid var(--shu,#a83e26);outline-offset:2px}

/* Leaflet zoom buttons (fine pointers only) */
.daymap__frame .leaflet-bar.leaflet-control{border:1px solid var(--ink-14,rgba(20,16,14,.14));border-radius:2px;box-shadow:0 2px 8px -4px rgba(20,16,14,.3);background-clip:padding-box}
.daymap__frame .leaflet-bar.leaflet-control a{
  display:grid;place-items:center;width:36px;height:36px;line-height:36px;
  background:rgba(251,247,240,.95);color:var(--sumi,#14100e);border-bottom:1px solid var(--ink-14,rgba(20,16,14,.14));
  border-radius:0;transition:color .15s ease,background-color .15s ease;
}
.daymap__frame .leaflet-bar.leaflet-control a:last-child{border-bottom:0}
.daymap__frame .leaflet-bar.leaflet-control a .dm-ic{width:15px;height:15px}
.daymap__frame .leaflet-bar.leaflet-control a.leaflet-disabled{color:var(--ink-30,rgba(20,16,14,.32));background:rgba(251,247,240,.95);cursor:default}
@media (hover:hover){.daymap__frame .leaflet-bar.leaflet-control a:not(.leaflet-disabled):hover{color:var(--shu,#a83e26);background:#fff}}
.daymap__frame .leaflet-top.leaflet-right .leaflet-control{margin:10px 10px 0 0}

/* attribution (GSI and OSM require it) — 11 px floor */
.daymap__frame .leaflet-control-attribution.leaflet-control{
  margin:0;padding:1px 7px;border-radius:0 2px 0 0;background:rgba(244,238,228,.88);
  color:var(--ink-55,rgba(20,16,14,.62));font:500 11px/1.5 var(--sans,'Inter',system-ui,sans-serif);
}
.daymap__frame .leaflet-control-attribution a{color:var(--ink-70,rgba(20,16,14,.72));text-decoration:none}
@media (hover:hover){.daymap__frame .leaflet-control-attribution a:hover{color:var(--shu,#a83e26);text-decoration:underline}}

/* ---------- popup ---------- */
.daymap__frame .dm-popup{margin-bottom:14px}
.daymap__frame .dm-popup .leaflet-popup-content-wrapper{
  padding:0;border-radius:3px;background:#fbf7f0;color:var(--sumi,#14100e);
  box-shadow:0 8px 24px -10px rgba(20,16,14,.4),0 0 0 1px var(--ink-14,rgba(20,16,14,.14));
}
.daymap__frame .dm-popup .leaflet-popup-tip{background:#fbf7f0;box-shadow:0 0 0 1px var(--ink-14,rgba(20,16,14,.14))}
.daymap__frame .dm-popup .leaflet-popup-content{margin:12px 14px 6px;min-height:0;font:400 13.5px/1.4 var(--sans,'Inter',system-ui,sans-serif)}
/* lijst langer dan de popup: zachte schaduw onderaan zolang er nog iets onder zit (scroll-schaduw, geen JS) */
.daymap__frame .dm-popup .leaflet-popup-scrolled{border:0;background:
  linear-gradient(rgba(251,247,240,0),#fbf7f0 70%) bottom/100% 22px no-repeat local,
  radial-gradient(farthest-side at 50% 100%,rgba(20,16,14,.18),transparent) bottom/100% 10px no-repeat scroll}
.daymap__frame .dm-popup .leaflet-popup-scrolled{border:0;scrollbar-width:thin;scrollbar-color:var(--ink-30,rgba(20,16,14,.32)) transparent}
.daymap__frame .dm-popup a.leaflet-popup-close-button{
  top:5px;right:5px;width:30px;height:30px;display:grid;place-items:center;border-radius:2px;
  color:var(--ink-55,rgba(20,16,14,.62));font:inherit;
}
.daymap__frame .dm-popup a.leaflet-popup-close-button .dm-ic{width:14px;height:14px}
@media (hover:hover){.daymap__frame .dm-popup a.leaflet-popup-close-button:hover{color:var(--shu,#a83e26);background:var(--ink-07,rgba(20,16,14,.06))}}
@media (pointer:coarse){.daymap__frame .dm-popup a.leaflet-popup-close-button{top:2px;right:2px;width:40px;height:40px}}

.dm-pop__head{display:flex;align-items:flex-start;gap:10px;padding-right:24px}
.dm-pop__n{
  flex:0 0 auto;display:grid;place-items:center;min-width:24px;height:24px;padding:0 5px;margin-top:1px;box-sizing:border-box;
  border:2px solid var(--shu,#a83e26);border-radius:4px;color:var(--shu,#a83e26);background:#fbf7f0;
  font:700 12px/1 var(--sans,'Inter',system-ui,sans-serif);font-variant-numeric:tabular-nums;transform:rotate(-2.5deg);
}
.dm-pop__n.is-end{background:var(--shu,#a83e26);color:#fbf7f0}
.dm-pop__names{display:flex;flex-direction:column;gap:2px;min-width:0}
.dm-pop__name{font:600 15px/1.25 var(--sans,'Inter',system-ui,sans-serif);color:var(--sumi,#14100e);overflow-wrap:anywhere}
.dm-pop__ja{font:500 12.5px/1.4 var(--mincho,serif);letter-spacing:.03em;color:var(--ink-55,rgba(20,16,14,.62));overflow-wrap:anywhere}
.dm-pop__items{list-style:none;margin:10px 0 0;padding:6px 0 0;border-top:1px solid var(--ink-14,rgba(20,16,14,.14))}
.dm-pop__items li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:0 6px;align-items:baseline;padding:3px 0}
.dm-pop__items time{font:500 12.5px/1.4 var(--mono,ui-monospace,monospace);font-variant-numeric:tabular-nums;color:var(--shu,#a83e26)}
.dm-pop__it{font-size:13.5px;line-height:1.38;color:var(--sumi-2,#332b26)}
.dm-pop__items li.is-now .dm-pop__it{font-weight:600;color:var(--sumi,#14100e)}
.dm-pop__nu{
  align-self:center;padding:1px 6px;border-radius:2px;background:var(--shu,#a83e26);color:#fff;
  font:700 11px/1.4 var(--sans,'Inter',system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;
}
.daymap__frame .dm-pop__route{
  display:flex;align-items:center;gap:6px;min-height:36px;margin-top:4px;
  color:var(--ai,#22405e);font:600 13.5px/1.2 var(--sans,'Inter',system-ui,sans-serif);text-decoration:none;
}
.daymap__frame .dm-pop__route .dm-ic{width:13px;height:13px}
@media (hover:hover){.daymap__frame .dm-pop__route:hover{color:var(--shu,#a83e26)}.daymap__frame .dm-pop__route:hover span{text-decoration:underline;text-underline-offset:3px}}
@media (pointer:coarse){.daymap__frame .dm-pop__route{min-height:44px}}
.daymap__frame .dm-pop__route + .dm-pop__items{margin-top:2px}

/* the core's numbered route strip nodes open the matching pin */
.dm-rs-link{cursor:pointer}

/* ---------- "Vergroot": a top-layer <dialog> (safe inside content-visibility sections) ---------- */
.dm-dialog{
  position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;
  margin:0;padding:0;border:0;overflow:hidden;overscroll-behavior:contain;
  background:var(--washi,#f4eee4);color:var(--sumi,#14100e);
}
.dm-dialog::backdrop{background:rgba(9,7,6,.5)}
.dm-dialog--plain{z-index:150}
.daymap__frame.is-full .dm-top{top:calc(12px + env(safe-area-inset-top,0px));left:calc(12px + env(safe-area-inset-left,0px));right:150px}
.daymap__frame.is-full .dm-bar{right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.daymap__frame.is-full .dm-offline{bottom:calc(66px + env(safe-area-inset-bottom,0px))}
.daymap__frame.is-full .leaflet-top.leaflet-right{top:calc(56px + env(safe-area-inset-top,0px))}
.daymap__frame.is-full .leaflet-bottom.leaflet-left{padding-bottom:env(safe-area-inset-bottom,0px)}

@media (prefers-reduced-motion:reduce){
  .dm-pin,.dm-pill,.dm-btn,.daymap__frame .leaflet-bar a{transition:none}
}