/* History feature visuals
   Extracted from index.html to keep PWA visual ownership explicit. */

.history-view{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.history-date-chips{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:4px 0 12px 0;
  -webkit-overflow-scrolling:touch;
}
.history-date-chip{
  flex:0 0 auto;
  min-height:40px;
  border:1px solid #cbd5e1;
  border-radius:999px;
  background:#fff;
  color:#334155;
  padding:8px 14px;
  font-weight:700;
  cursor:pointer;
}
.history-date-chip[aria-pressed="true"]{
  border-color:#2563eb;
  background:#eff6ff;
  color:#1d4ed8;
}
.history-detail-card{
  border:1px solid #e2e8f0;
  border-radius:18px;
  background:#fff;
  padding:18px;
}
.history-detail-card h3{
  margin:0;
}
.history-day-metric{
  margin:10px 0 0 0;
  color:#0f172a;
  font-size:22px;
  font-weight:800;
}
.history-detail-section{
  margin-top:18px;
}
.history-detail-section h4{
  margin:0 0 8px 0;
  color:#0f172a;
  font-size:15px;
}
.history-detail-list{
  margin:0;
  padding-left:18px;
  color:#334155;
  line-height:1.5;
}
.history-movement-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.history-movement-item{
  display:flex;
  gap:12px;
  align-items:baseline;
  color:#334155;
}
.history-movement-time{
  min-width:44px;
  color:#64748b;
  font-size:13px;
  font-weight:700;
}
.history-reliability{
  border-top:1px solid #e2e8f0;
  padding-top:14px;
  color:#64748b;
}
.history-detail-section[hidden],
.history-reliability[hidden]{
  display:none !important;
}
@media (max-width: 960px){
  .location-indicators{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .location-shell-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 640px){
  .location-indicators{
    grid-template-columns:1fr;
  }
  .location-hero-top{
    flex-direction:column;
    align-items:flex-start;
  }
  .location-hero-main{
    flex-direction:column;
  }
  .location-hero-actions,
  .location-refresh-msg{
    align-items:stretch;
    text-align:left;
    max-width:none;
    width:100%;
  }
  .location-refresh-btn{
    width:100%;
  }
  .location-side-actions .btn,
  .location-summary-actions .btn,
  .location-quick-actions .btn{
    width:100%;
  }
  .history-day-top{
    flex-direction:column;
    align-items:flex-start;
  }
  .history-shell-grid .btn{
    width:100%;
  }
}