:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color-scheme: light dark; }
body { margin: 0; background: #f3f5f7; color: #1d2731; }
.container { max-width: 1100px; margin: 1rem auto; padding: 0 0.8rem 2rem; }
.card { background: #fff; border-radius: 10px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.grid { display: grid; gap: 1rem; }
.two-up { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.metrics { display: grid; grid-template-columns: repeat(2,minmax(120px,1fr)); gap: .5rem; }
.metric { background:#f7fafc; padding:.5rem; border-radius:8px; }
.chart { width: 100%; min-height: 320px; padding-bottom: 18px; }
 .coverage-list { white-space: pre-wrap; word-break: break-word; margin: 0; line-height: 1.5; background:#f7fafc; border-radius:8px; padding:.65rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.error { color: #b00020; min-height: 1.2rem; }
.wind-widget { display:flex; align-items:center; gap:1rem; }
.wind-widget > div:last-child { margin-left: .35rem; }
.compass { width:100px; height:100px; border:2px solid #9aa; border-radius:50%; position:relative; background:#f9fbff; }
.compass-label { position:absolute; font-size:1.35rem; line-height:1; color:#0d5; }
.compass-label.n { left:50%; top:-1.45rem; transform:translateX(-50%); }
.compass-label.e { right:-1.05rem; top:50%; transform:translateY(-50%); }
.compass-label.s { left:50%; bottom:-1.45rem; transform:translateX(-50%); }
.compass-label.w { left:-1.45rem; top:50%; transform:translateY(-50%); }
.wind-vector { position:absolute; inset:0; transform:rotate(0deg); }
.arrow-shaft { position:absolute; width:4px; height:36px; background:#0d5; left:48px; top:10px; border-radius:3px; }
.arrow-head { position:absolute; width:12px; height:12px; left:44px; top:40px; background:#0d5; clip-path: polygon(50% 100%, 0 0, 100% 0); }
@media (max-width: 600px) { .metrics { grid-template-columns: 1fr; } .chart { min-height: 260px; padding-bottom: 14px; } }

.post-thirty { clear: both; margin-top: .5rem; }
.chart { overflow: hidden; }
.card { position: relative; z-index: 0; }

.uplot { overflow: visible; }

.barometer-read { margin-top: .35rem; background:#f7fafc; border-radius:8px; padding:.65rem; font-size:.95rem; line-height:1.35; }
.barometer-read p { margin:.2rem 0; }
@media (max-width: 600px) { .barometer-read { font-size:.9rem; } }
.site-titlebar {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -1rem;
  margin-bottom: 1rem;
  padding: .8rem;
  background: #000;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
}

.site-titlebar h1 {
  margin: 0;
}

.site-nav {
  margin-top: .35rem;
  font-size: .95rem;
}

.site-nav a {
  color: #fff;
}

.site-titlebar {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background: #000;
  color: #fff;
  padding: .8rem 1rem;

  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.site-titlebar h1 {
  margin: 0;
  flex: 0 0 auto;
}

.site-nav {
  margin: 0;
  flex: 0 0 auto;
}

#freshness,
#forecast-status {
  margin: 0;
  flex: 1 1 auto;
  text-align: right;
  opacity: 0.8;
  font-size: 0.9rem;
}

.site-nav a {
  color: #fff;
}