:root{
  --desktop-panel:400px;
  --desktop-gap:18px;
}
.footer{display:none!important}
.info-menu{display:block!important}

.place-marker[data-color=gray]{
  width:24px;
  height:24px;
  border-radius:50%;
  transform:none;
  background:#536173;
  border:3px solid rgba(255,255,255,.98);
  box-shadow:0 4px 14px rgba(0,0,0,.55),0 0 0 3px rgba(83,97,115,.20);
}
.place-marker[data-color=gray]:hover{transform:scale(1.10)}
.place-marker[data-color=gray] span{transform:none;font-size:0}
.place-marker[data-color=gray] span:empty::after{
  content:"";
  display:block;
  width:6px;height:6px;border-radius:50%;
  background:#e4e9ef;
}
.place-marker{
  appearance:none;
  -webkit-appearance:none;
  padding:0;
  margin:0;
  outline:none;
  opacity:1!important;
  visibility:visible!important;
}
.place-marker:focus-visible{
  box-shadow:0 0 0 4px rgba(233,255,88,.35),0 4px 14px #0007;
}

.list-item{position:relative;padding-right:44px}
.list-item>button{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border-radius:14px!important;
  opacity:0!important;
  z-index:2;
}
.list-item::after{
  content:"›";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-53%);
  font-size:25px;
  color:#cbd4e1;
  pointer-events:none;
}
.list-item:hover{
  border-color:#465267;
  background:linear-gradient(180deg,#1b2431,#171f2a);
}

.info-menu nav{
  width:248px;
  padding:10px;
}
.info-menu nav::before{
  content:"コンデル？";
  display:block;
  padding:8px 10px 5px;
  color:#fff;
  font-size:13px;
  font-weight:950;
  border-bottom:1px solid #ffffff12;
  margin-bottom:4px;
}
.info-menu nav a{min-height:40px;display:flex;align-items:center}
.info-menu nav span{line-height:1.45}

@media(min-width:1000px){
  :root{--top-h:64px;--sheet-h:auto}

  .topbar{
    height:64px;
    padding:0 22px;
    box-shadow:0 10px 34px rgba(0,0,0,.22);
  }
  .brand{font-size:21px}
  .brand small{display:inline;font-size:10px}
  .top-action{height:40px;padding:0 14px}

  #map{inset:64px 0 0 0}

  .search-panel{
    top:84px;
    left:20px;
    transform:none;
    width:390px;
    padding:10px;
    border-radius:20px;
    box-shadow:0 18px 55px rgba(0,0,0,.38);
    background:rgba(12,17,24,.93);
  }
  .search-row input{height:48px;font-size:14px}
  .search-row button{height:48px}
  .toolbar{margin-top:9px}
  .legend{display:flex;margin-top:10px;font-size:10px}
  .search-results{max-height:460px}

  .sheet{
    left:auto;
    right:20px;
    top:84px;
    bottom:20px;
    transform:none;
    width:400px;
    height:auto!important;
    max-height:none!important;
    border:1px solid #ffffff17;
    border-radius:22px;
    box-shadow:0 18px 60px rgba(0,0,0,.42);
    background:rgba(10,14,20,.96);
  }
  .sheet-handle{display:none}
  .sheet-content{
    height:100%!important;
    padding:20px 18px 24px;
  }

  .welcome h1{font-size:30px}
  .welcome-copy{font-size:13px;line-height:1.7}
  .welcome-actions{display:grid;grid-template-columns:1fr 1fr}
  .primary,.secondary{min-height:44px}

  .place-title h2{font-size:26px}
  .place-title .cat{font-size:11px;line-height:1.55}
  .metric{padding:14px}
  .metric strong{font-size:23px}
  .metric span{font-size:11px}
  .confidence{font-size:11px;padding:10px 11px}

  .list{gap:8px}
  .list-item{min-height:68px;padding:11px 48px 11px 12px}
  .list-item strong{font-size:14px}
  .list-item small{font-size:10.5px;line-height:1.5}

  .fab{
    right:438px;
    bottom:22px!important;
    height:48px;
    min-width:94px;
    border-radius:16px;
    box-shadow:0 14px 36px #0008;
  }
  .fab b{font-size:12px}

  .maplibregl-ctrl-bottom-right{
    right:432px!important;
    bottom:20px!important;
  }
  .maplibregl-ctrl-bottom-left{bottom:8px!important}
  .maplibregl-ctrl-attrib{display:block!important}

  .ad-slot{
    left:50%;
    bottom:18px!important;
    max-width:540px;
  }

  dialog{width:min(560px,calc(100% - 40px))}
  dialog form{padding:26px}
  dialog h2{font-size:25px}

  .page{
    max-width:920px;
    min-height:100vh;
    margin:0 auto;
    padding:72px 34px 90px;
    color:#dfe6ef;
    font-size:15px;
  }
  .page>a:first-child{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:0 12px;
    border:1px solid #303a48;
    border-radius:10px;
    background:#121923;
    text-decoration:none;
  }
  .page h1{
    font-size:40px;
    letter-spacing:-.035em;
    margin-top:28px;
  }
  .page h2{
    font-size:22px;
    border-top:1px solid #26303d;
    padding-top:24px;
  }
  .page p{color:#aeb8c7;line-height:2}
  .page strong{color:#fff}
}

@media(min-width:1500px){
  .search-panel{left:28px;width:420px}
  .sheet{right:28px;width:430px}
  .fab{right:476px}
  .maplibregl-ctrl-bottom-right{right:470px!important}
}

@media(min-width:701px) and (max-width:999px){
  .footer{display:none!important}
  .info-menu{display:block!important}
  .sheet{bottom:0;border-radius:24px 24px 0 0}
  .fab{bottom:calc(var(--sheet-h) + 16px)}
  .maplibregl-ctrl-bottom-right{bottom:calc(var(--sheet-h) + 62px)!important}
}

@media(max-width:700px){
  .top-actions{gap:6px}
  .info-menu{display:block!important}
  .info-menu nav{
    position:fixed;
    top:calc(54px + env(safe-area-inset-top,0px) + 8px);
    right:10px;
    width:min(270px,calc(100vw - 20px));
  }
  .search-panel{box-shadow:0 10px 28px #0005}
  .sheet{box-shadow:0 -10px 36px #0007}
  .footer{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  .place-marker,.sheet,.fab,.maplibregl-ctrl-bottom-right{transition:none!important}
}