/* The public roadmap page (site/roadmap.html, written by scripts/whats-new-site.mjs; docs/website-2.md §6.5 and §15
   "UI and motion: the public roadmap page"). The hero is module.css's (.mo-hero), the containers, buttons, .mono and
   the closing band styles.css's. This file is the page's own: three columns (Now, Next, Later) that stack under
   700 px, the status pills (no pulses), the top ten with Vote, and the Shipped tiles with What's new's stills.
   Light only, like the rest of the site. */

.rm-section {
  padding: clamp(28px, 4vw, 48px) 0;
}
.rm-section + .rm-section {
  border-top: 1px solid var(--line);
}
.rm-section h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.rm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 18px;
}
.rm-head p {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}
.rm-asof:empty {
  display: none;
}
.rm-status {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--muted);
}
.rm-status:empty {
  display: none;
}

/* What's coming: three columns, stacked under 700 px. */
.rm-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.rm-col {
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.rm-col h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.rm-col-now h3 {
  color: var(--accent-text);
}
.rm-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rm-plan {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.rm-plan:first-child {
  padding-top: 0;
  border-top: 0;
}
.rm-plan b {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.rm-sum {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}
.rm-empty,
.rm-loading {
  font-size: 14.5px;
  color: var(--muted);
}

/* Most asked for: the top ten, each with its votes and churches, a pill, and Vote into the app. */
.rm-top {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.rm-top:empty {
  display: none;
}
.rm-ask {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.rm-ask:first-child {
  border-top: 0;
}
.rm-rank {
  width: 24px;
  flex-shrink: 0;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rm-ask-body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.rm-ask-body b {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.rm-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 13.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rm-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--sidebar);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.rm-pill-planned {
  background: #fbebd0;
  color: var(--accent-text);
}
.rm-pill-building {
  background: #fde7c4;
  color: #7a4a00;
}
.rm-pill-live {
  background: #dcfce7;
  color: var(--ok);
}
.rm-vote {
  flex-shrink: 0;
}
.rm-top-empty {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}
.rm-top-empty[hidden] {
  display: none;
}
.rm-ask-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 18px;
}
.rm-ask-actions p {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

/* Shipped: tiles with What's new's stills, four across, two on a phone. */
.rm-shipped {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rm-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 10px 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.16s ease;
}
.rm-tile:hover {
  border-color: var(--accent);
}
.rm-tile img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: var(--sidebar);
}
.rm-tile b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.rm-tile time {
  font-size: 13px;
  color: var(--muted);
}
.rm-all {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 10px;
  font-weight: 600;
  color: var(--accent-text);
}

@media (max-width: 960px) {
  .rm-shipped {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .rm-columns {
    grid-template-columns: minmax(0, 1fr);
  }
  .rm-shipped {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rm-ask {
    flex-wrap: wrap;
  }
  .rm-ask-body {
    flex-basis: calc(100% - 38px);
  }
  .rm-vote {
    margin-left: 38px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rm-tile {
    transition: none;
  }
}