/* Page shell for the standalone public WSPR site. The chart/control/tile styling
   comes from the shared css/wspr.css (copied from the app); this file only
   provides the page frame and the CSS variables wspr.css expects. */
:root { --muted: #94a3b8; }

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #0b1120;
  color: #e2e8f0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wspr-page-head {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: .8rem;
  flex-wrap: wrap;
  padding: .7rem 1.1rem;
  border-bottom: 1px solid rgba(148, 163, 184, .14);
}

.wspr-page-head h1 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.wspr-page-head .wspr-page-sub { color: var(--muted); font-size: .85rem; }

.wspr-page-head .wspr-page-credit {
  margin-left: auto;
  color: var(--muted);
  font-size: .72rem;
}

.wspr-page-head a { color: #7dd3fc; text-decoration: none; }
.wspr-page-head a:hover { text-decoration: underline; }

/* The chart container (#wsprModal here) fills the space under the header and is
   a normal flex column -- NOT the app's fixed-overlay .wspr-modal. wspr.js only
   toggles its `hidden` class, which we never set, so it stays visible. */
#wsprModal {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Reuses wspr.css's .wspr-modal-body styling; just make it fill the column. */
#wsprModal .wspr-modal-body {
  flex: 1 1 auto;
  min-height: 0;
}