/* apps.mercatis.com — tokens from colors_and_type.css (mercatis design system); no literal colors here. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--mc-font-sans);
  font-size: var(--mc-text-base);
  line-height: var(--mc-leading-normal);
  color: var(--mc-fg);
  background: var(--mc-bg);
}

.container {
  width: 100%;
  max-width: var(--mc-container-max);
  margin: 0 auto;
  padding: 0 var(--mc-space-5);
}

main { flex: 1; }

a:focus-visible {
  outline: none;
  box-shadow: var(--mc-shadow-focus);
}

/* ── Top bar ── */
.top {
  background: var(--mc-surface);
  border-bottom: 1px solid var(--mc-border-subtle);
}
.top__inner {
  height: 64px;
  display: flex;
  align-items: center;
}
.top__logo { display: inline-flex; border-radius: var(--mc-radius-sm); }
.top__logo img { display: block; height: 29px; width: auto; }

/* ── Canonical section header: ALL CAPS + tagline + hairline ── */
.section { padding: var(--mc-space-8) 0; }
.section-head h1 {
  margin: 0;
  font-size: var(--mc-text-2xl);
  font-weight: var(--mc-weight-semibold);
  letter-spacing: var(--mc-track-caps);
  line-height: var(--mc-leading-tight);
}
.section-head__tagline {
  margin: var(--mc-space-2) 0 0;
  font-size: var(--mc-text-md);
  color: var(--mc-fg-muted);
}
.section-head__rule {
  margin: var(--mc-space-4) 0 var(--mc-space-7);
  border: 0;
  border-top: 1px solid var(--mc-border-subtle);
}

/* ── App cards ── */
.apps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--mc-space-5);
}
.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--mc-space-5);
  background: var(--mc-surface);
  border: 1px solid var(--mc-border-subtle);
  border-radius: var(--mc-radius-lg);
  box-shadow: var(--mc-shadow);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--mc-dur-fast) var(--mc-ease);
}
.app:hover { box-shadow: var(--mc-shadow-md); }
.app__title {
  margin: 0;
  font-size: var(--mc-text-lg);
  font-weight: var(--mc-weight-semibold);
}
.app:hover .app__title { color: var(--mc-accent-text); }
.app__text {
  margin: var(--mc-space-2) 0 var(--mc-space-4);
  color: var(--mc-fg-muted);
  flex: 1;
}
.app__meta {
  font-size: var(--mc-text-sm);
  color: var(--mc-fg-subtle);
}

/* ── Footer ── */
.foot {
  border-top: 1px solid var(--mc-border-subtle);
  color: var(--mc-fg-muted);
  font-size: var(--mc-text-sm);
}
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--mc-space-3);
  padding-top: var(--mc-space-5);
  padding-bottom: var(--mc-space-5);
}
.foot nav { display: flex; gap: var(--mc-space-5); }
.foot a {
  color: var(--mc-fg-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: var(--mc-radius-xs);
}
.foot a:hover { color: var(--mc-fg); }