@import url("/base.css");

/* The map is optional; the list stays available without WebGL or map hosting. */
.view-switch {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--pale);
}
.view-switch button {
  padding: 10px 26px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 650;
  cursor: pointer;
}
.view-switch button.selected {
  color: white;
  background: var(--blue);
}
.map-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
}
.map-intro {
  padding: 22px 24px 8px;
}
.map-intro strong {
  font-size: 1.2rem;
}
.map-intro p,
.map-footnote {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.65;
}
.map-message {
  min-height: 22px;
  margin: 8px 24px 15px;
  font-size: 0.85rem;
  color: var(--muted);
}
.poll-map {
  height: 520px;
  background: #eef3f7;
}
.map-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 18px 24px 0;
  font-size: 0.85rem;
}
.map-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.legend-dot {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: var(--blue);
}
.legend-dot.ended {
  background: var(--red);
}
.map-legend button {
  margin-left: auto;
  padding: 4px;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.map-count {
  padding: 0 24px;
  font-weight: 650;
}
.map-footnote {
  margin: 0;
  padding: 0 24px 20px;
}
.mapped-polls {
  padding: 0 24px 24px;
}
.mapped-polls summary {
  color: var(--blue);
  cursor: pointer;
  font-size: 0.9rem;
}
.mapped-polls ul {
  padding-left: 20px;
  max-height: 300px;
  overflow: auto;
}
.mapped-polls li {
  padding: 8px 0;
  overflow-wrap: anywhere;
}
.mapped-polls a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.map-popup-content {
  max-height: 280px;
  overflow: auto;
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.map-poll-link {
  display: block;
  padding: 12px 5px;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.map-poll-link strong {
  display: block;
  font-size: 1rem;
  line-height: 1.5;
}
.map-poll-link span,
.map-popup-content > p {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.8rem;
}
.maplibregl-popup-close-button {
  min-width: 30px;
  min-height: 30px;
  font-size: 20px;
}
.maplibregl-ctrl-attrib a {
  text-decoration: underline;
}
@media (max-width: 600px) {
  .poll-map {
    height: 420px;
  }
  .map-intro {
    padding: 18px 16px 5px;
  }
  .map-message {
    margin-left: 16px;
    margin-right: 16px;
  }
  .map-legend {
    padding: 16px 16px 0;
    gap: 13px;
  }
  .map-count {
    padding: 0 16px;
  }
  .map-footnote,
  .mapped-polls {
    padding-left: 16px;
    padding-right: 16px;
  }
  .maplibregl-ctrl-attrib {
    font-size: 10px;
  }
}

.post-kind-switch {
  display: flex;
  gap: 6px;
  padding: 5px;
  margin-bottom: 28px;
  background: var(--pale);
  border-radius: 12px;
}
.post-kind-switch a {
  flex: 1;
  padding: 11px;
  text-align: center;
  border-radius: 8px;
  color: var(--blue);
  font-weight: 650;
}
.post-kind-switch [aria-current="page"] {
  background: var(--blue);
  color: white;
}
.content-filter {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 20px 22px 0;
  font-size: 0.9rem;
}
.content-filter select {
  width: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  color: var(--ink);
  font: inherit;
}
.task-reward,
.social-card {
  padding: 26px;
  margin: 28px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.task-reward {
  background: var(--pale);
  border-left: 4px solid var(--red);
}
.task-reward h2,
.task-card-reward strong {
  overflow-wrap: anywhere;
}
.task-reward p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
}
.task-card-reward {
  padding: 20px 0;
}
.task-card-reward span,
.task-card-reward strong {
  display: block;
}
.task-card-reward span {
  color: var(--muted);
  font-size: 0.8rem;
  margin-bottom: 7px;
}
.social-card h2 {
  font-size: 1.35rem;
  margin: 0 0 20px;
}
#like-post[aria-pressed="true"] {
  color: var(--blue);
  background: var(--pale);
  opacity: 1;
}
.replies-heading {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-top: 35px;
}
.replies-heading > span {
  color: var(--muted);
  font-size: 0.85rem;
}
.reply-card {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.reply-byline {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.reply-byline span {
  font-size: 0.75rem;
  color: var(--muted);
}
.reply-message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
}
.reply-contacts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--blue);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.reply-contacts a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
#reply-form {
  margin-top: 30px;
}
#reply-form label:not(.checkbox-row) {
  display: block;
  margin: 18px 0 9px;
  font-weight: 600;
}
#reply-form input:not([type="checkbox"]),
#reply-form textarea {
  width: 100%;
}
#reply-form textarea {
  resize: vertical;
}
.contact-fields {
  padding: 18px;
  margin: 24px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 0;
}
.contact-fields legend {
  font-weight: 650;
  padding: 0 5px;
}
#task-form label:not(.checkbox-row) {
  display: block;
  margin: 18px 0 9px;
  font-weight: 600;
}
@media (max-width: 600px) {
  .social-card,
  .task-reward {
    padding: 20px 16px;
  }
  .content-filter {
    display: flex;
  }
}
#reply-form input[type="tel"],
#reply-form input[type="email"] {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  font: inherit;
}

/* Homepage: an editorial map of local questions and tasks. */
.home-page { --home-ink: #0c253b; --home-red: #c9162c; --home-paper: #f8f8f3; color: var(--home-ink); }
.home-hero { display: grid; grid-template-columns: 1fr 0.92fr; align-items: stretch; min-height: 510px; margin-top: 34px; background: var(--home-paper); }
.home-hero-copy { padding: 62px 15px 55px 36px; align-self: center; position: relative; z-index: 1; }
.home-kicker { font-size: 11px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; line-height: 1.4; }
.home-kicker::before { content: ''; display: inline-block; width: 28px; height: 3px; margin: 0 12px 3px 0; background: var(--home-red); }
.home-hero h1 { margin: 26px 0 22px; font-size: clamp(42px, 5vw, 70px); line-height: .99; letter-spacing: -.055em; font-weight: 800; }
.home-hero h1 span, .home-story h2 span { color: var(--home-red); }
.home-lede { max-width: 440px; font-size: 16px; line-height: 1.65; }
.home-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 22px; }
.home-primary { background: var(--home-red); border-color: var(--home-red); }
.home-primary:hover:not(:disabled) { background: #a81325; }
.home-secondary { background: var(--home-paper); }
.home-explore, .home-install-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.home-explore svg, .home-install-link svg { width: 17px; height: 17px; }
.home-map { position: relative; min-width: 0; overflow: hidden; }
.home-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-map-caption { position: absolute; right: 20px; bottom: 26px; max-width: 180px; padding: 15px 18px; background: var(--home-paper); font-size: 13px; line-height: 1.4; font-weight: 700; }
.home-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; padding: 34px 0; }
.home-facts > div { display: flex; align-items: flex-start; gap: 15px; }
.home-facts svg { color: var(--home-red); flex: none; width: 27px; height: 27px; }
.home-facts strong, .home-facts small { display: block; }
.home-facts strong { font-size: 15px; }
.home-facts small { margin-top: 5px; font-size: 13px; line-height: 1.5; }
.home-story { display: grid; grid-template-columns: 1fr 1fr; background: var(--home-paper); }
.home-story-image { min-height: 480px; background: url('/neighborhood.png') 26% 55% / cover no-repeat; }
.home-story-copy { padding: 55px 42px; }
.home-story h2, .home-install h2 { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.05; font-weight: 800; letter-spacing: -.04em; margin: 20px 0; }
.home-story-copy > p:not(.home-kicker) { max-width: 400px; font-size: 15px; }
.home-story-links { margin-top: 26px; }
.home-story-links a { display: grid; grid-template-columns: 1fr auto; padding: 14px 0; border-top: 1px solid #d8dedb; }
.home-story-links a strong { font-size: 15px; }
.home-story-links a span { grid-column: 1; font-size: 13px; margin-top: 4px; }
.home-story-links a svg { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.home-install { margin: 0 0 50px; padding: 52px; border: 0; border-radius: 0; background: var(--home-ink); color: white; justify-content: space-between; gap: 30px; }
.home-install-copy { max-width: 600px; }
.home-install p:not(.home-kicker) { color: white; font-size: 15px; margin-bottom: 20px; }
.home-install-qr { padding: 8px; border: 0; border-radius: 4px; }
.home-install-link { color: white; }
@media (max-width: 800px) {
  .home-hero { grid-template-columns: 1fr; margin-top: 20px; }
  .home-hero-copy { padding: 42px 24px; }
  .home-map { height: 320px; }
  .home-story { grid-template-columns: 1fr; }
  .home-story-image { min-height: 300px; }
  .home-story-copy { padding: 40px 24px; }
}
@media (max-width: 600px) {
  .home-hero h1 { font-size: clamp(36px, 9vw, 52px); }
  .home-facts { grid-template-columns: 1fr; gap: 22px; }
  .home-install { align-items: flex-start; flex-direction: column; padding: 36px 24px; }
  .home-install-qr img { width: 140px; height: 140px; }
}
@media (max-width: 800px) {
  .home-hero, .home-story { grid-template-columns: minmax(0, 1fr); }
  .home-hero-copy, .home-story-copy { min-width: 0; }
  .home-hero h1, .home-story h2 { overflow-wrap: anywhere; }
}
.home-install .home-kicker { color: #fff; }
.home-hero h1 { font-size: clamp(38px, 4vw, 56px); }
@media (max-width: 600px) {
  .home-hero h1 { font-size: clamp(28px, 8vw, 38px); }
}

/* Product screens share the homepage's paper and ink palette while keeping controls legible. */
.post-kind-switch, .view-switch { background: #f2f4ee; border-color: var(--line); border-radius: 6px; }
.post-kind-switch a, .view-switch button { color: var(--ink); border-radius: 4px; }
.post-kind-switch [aria-current="page"], .view-switch button.selected, .filter-tabs button.selected { background: var(--ink); color: white; }
.content-filter select { border-color: #b9c6ce; border-radius: 5px; color: var(--ink); }
.map-panel, .social-card, .task-reward { border-color: var(--line); border-radius: 8px; }
.task-reward { background: #f8f8f3; border-left: 1px solid var(--line); }
.task-reward h2 { font-weight: 750; }
#reply-form input[type="tel"], #reply-form input[type="email"] { border-color: #b9c6ce; border-radius: 5px; font-size: 16px; }