/* Final presentation refinements. */

/* Header sizing */
header.masthead .brand {
  margin-bottom: 18px;
}

header.masthead .brand img {
  height: 60px !important;
  max-width: 161px !important;
}

/* Visible page title and intro copy */
header.masthead h1 {
  font-size: 0 !important;
  line-height: 1.08;
}

header.masthead h1::after {
  content: "Queens Economy Dashboard";
  display: block;
  color: var(--text);
  font-size: clamp(48px, 5.3vw, 64px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

header.masthead > p {
  margin-top: 18px;
  font-size: 0 !important;
  line-height: 0;
}

header.masthead > p::after {
  content: "Live economic and quality of life indicators for the Borough of Queens, pulled from multiple public data sources. Please note that all summaries and comparisons are programmatically generated, and important figures should be verified with the original sources.";
  display: block;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* Secondary census and wage figures: one compact stats strip, not four full KPI cards. */
div.kpi-grid.secondary-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 7px 0 0;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(50, 50, 49, 0.035);
}

div.kpi-grid.secondary-kpis > .kpi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "sub sub";
  align-items: center;
  column-gap: 9px;
  row-gap: 1px;
  min-height: 0;
  padding: 7px 11px 6px;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

div.kpi-grid.secondary-kpis > .kpi + .kpi {
  border-left: 1px solid var(--panel-border);
}

div.kpi-grid.secondary-kpis > .kpi::before {
  content: none;
}

div.kpi-grid.secondary-kpis > .kpi .label {
  grid-area: label;
  min-height: 0;
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.045em;
  line-height: 1.15;
  text-transform: uppercase;
}

div.kpi-grid.secondary-kpis > .kpi .value {
  grid-area: value;
  min-height: 0;
  display: block;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

div.kpi-grid.secondary-kpis > .kpi .sub {
  grid-area: sub;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Browser-level loading cover: remains visible through hydration and first stable layout. */
body.dashboard-is-loading {
  overflow: hidden;
}

.dashboard-loading {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 100vh;
  padding: 24px;
  background: var(--bg, #fbfaf6);
  color: var(--text, #323231);
}

.page-loader {
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms ease, visibility 280ms ease;
}

.page-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.dashboard-loading-mark {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
}

.dashboard-loading-mark span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent, #01b1ff);
  animation: dashboard-dot 0.9s ease-in-out infinite alternate;
}

.dashboard-loading-mark span:nth-child(2) {
  background: var(--orange, #faa00c);
  animation-delay: 0.14s;
}

.dashboard-loading-mark span:nth-child(3) {
  background: var(--yellow, #fec718);
  animation-delay: 0.28s;
}

.dashboard-loading p {
  margin: 0;
  color: var(--muted, #6b6b6b);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.035em;
}

@keyframes dashboard-dot {
  from { transform: translateY(5px); opacity: 0.45; }
  to { transform: translateY(-5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-loading-mark span {
    animation: none;
    opacity: 1;
  }

  .page-loader {
    transition: none;
  }
}

@media (max-width: 800px) {
  header.masthead .brand img {
    height: 50px !important;
    max-width: 137px !important;
  }

  header.masthead h1::after {
    font-size: clamp(42px, 12vw, 54px);
  }

  div.kpi-grid.secondary-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  div.kpi-grid.secondary-kpis > .kpi:nth-child(odd) {
    border-left: 0;
  }

  div.kpi-grid.secondary-kpis > .kpi:nth-child(n + 3) {
    border-top: 1px solid var(--panel-border);
  }
}

@media (max-width: 520px) {
  div.kpi-grid.secondary-kpis > .kpi {
    padding: 7px 9px 6px;
  }

  div.kpi-grid.secondary-kpis > .kpi .value {
    font-size: 18px;
  }
}