/* Filled planes replace the previous wireframe grammar. */
:root {
  --surface: #fcfbf7;
  --surface-muted: #e9e7de;
  --surface-lime: #e5ecc0;
  --surface-clay: #f3ddd4;
  --surface-moss: #cdd8c5;
}

.topbar,
.hero,
.sources,
footer { border: 0; }

.topbar { height: 5.75rem; }

.hero { overflow: visible; }
.hero dl { gap: .55rem; border: 0; }
.hero dl div {
  padding: .85rem 1rem;
  border: 0;
  border-radius: var(--joint-forward);
  background: var(--surface);
}
.orbit {
  border: 0;
  border-radius: 46% 54% 48% 52% / 58% 44% 56% 42%;
  background: var(--surface-moss);
  opacity: .75;
}
.orbit::before,
.orbit::after,
.orbit i { display: none; }
.orbit span { color: var(--forest); }

.filter-dock {
  gap: .45rem;
  padding: .45rem;
  border: 0;
  border-radius: var(--joint-forward);
  background: var(--surface-muted);
}
.filter-dock.is-scrolled { background: var(--surface-muted); }
.filter-search {
  border: 0;
  border-radius: 0 .95rem 0 .95rem;
  background: var(--surface-lime);
}
.filter-controls { gap: .45rem; }
.filter-controls label {
  border: 0;
  border-radius: .72rem 0 .72rem 0;
  background: var(--surface);
}
.filter-controls label:nth-child(even) { border-radius: 0 .72rem 0 .72rem; }
.filter-actions { gap: .38rem; padding: 0 .25rem; }
.filter-actions button,
#back-to-top {
  border: 0;
  border-radius: 50%;
  background: var(--surface);
}
.filter-actions #zh-filter[aria-pressed="true"] {
  background: var(--ink);
  color: var(--surface);
}
.filter-actions button:hover,
#back-to-top:hover { background: var(--surface-clay); }

.results-head { padding-bottom: 0; border: 0; }
.cards { gap: .85rem; padding-top: 1.2rem; }
.card-column { gap: .85rem; }
.resource-card {
  border: 0;
  background: var(--surface);
}
.resource-card--signal { border: 0; background: var(--surface-lime); }
.card-column:nth-child(3n) .resource-card:nth-child(4n) { background: var(--surface-moss); }
.card-column:nth-child(4n) .resource-card:nth-child(5n) { background: var(--surface-clay); }
.resource-card:hover,
.resource-card:focus-within {
  border: 0;
  background: var(--surface-clay);
}
.resource-card__add {
  border: 0;
  background: var(--surface-muted);
}
.resource-card__add:hover,
.resource-card__add[aria-pressed=true] {
  border: 0;
  background: var(--orange);
}
.stream-loader { border: 0; }

.sources { gap: clamp(3rem, 8vw, 10rem); }
.source-ledger { display: grid; gap: .7rem; border: 0; }
.source-row {
  padding: 1.15rem 1.2rem;
  border: 0;
  border-radius: var(--joint-reverse);
  background: var(--surface);
}
.source-row:nth-child(even) { background: var(--surface-muted); }

footer {
  margin-top: 2rem;
  padding: 1.4rem 1.1rem;
  border-radius: var(--joint-forward);
  background: var(--surface-muted);
}

@media (max-width: 840px) {
  .filter-controls label { border-radius: .56rem 0 .56rem 0; }
  .filter-controls label:nth-child(even) { border-radius: 0 .56rem 0 .56rem; }
}

@media (max-width: 520px) {
  .topbar { height: 5rem; }
  .hero dl div { padding: .75rem .85rem; }
  .filter-dock { padding: .36rem; }
  .filter-controls { gap: .36rem; }
  .filter-controls label { border-radius: .45rem 0 .45rem 0; }
  .filter-controls label:nth-child(even) { border-radius: 0 .45rem 0 .45rem; }
  .cards,
  .card-column { gap: .7rem; }
}