/* Shared header for the daily chart (index.html) and monthly outlook (month.html):
   the title and the two views as tabs on one row, that view's controls on the next. */
.site-header { font-family: inherit; color: #222; }
.site-title-row {
  display: flex; align-items: flex-end; gap: 12px;
  padding-top: 6px; border-bottom: 1px solid #ccc;
}
.site-title {
  flex: 1 1 auto; min-width: 0; margin: 0; padding: 0 0 3px;
  font-size: clamp(18px, 5vw, 24px); font-weight: 600; line-height: 1.2;
}
.site-title a { color: inherit; text-decoration: none; }
.site-tabs { display: flex; flex: none; gap: 4px; margin-bottom: -1px; }
.site-tabs a {
  padding: 7px 14px; border: 1px solid transparent; border-bottom: none;
  border-radius: 6px 6px 0 0; color: #555; font-size: 15px; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
}
.site-tabs a:hover { background: #f1f3f5; color: #222; text-decoration: none; }
.site-tabs a[aria-current="page"] {
  border-color: #ccc; background: #fff; color: #222; font-weight: 600;
  position: relative; /* covers the row's bottom rule under the current tab */
  box-shadow: 0 1px 0 #fff;
}
.site-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 0 4px; }
/* date and month pickers in the page's font, not the browser's default */
.site-controls input {
  font: inherit; color: #222; padding: 3px 6px; line-height: 1.3;
  border: 1px solid #ccc; border-radius: 4px; background: #fff;
}
@media (max-width: 400px) {
  .site-title-row { gap: 8px; }
  .site-tabs a { padding: 7px 10px; }
}
@media print {
  .site-tabs, .site-controls { display: none; }
  .site-title-row { border-bottom: none; }
}