.rest-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rest-options button {
  margin: 0;
}

.rest-options button[aria-pressed="true"] {
  background: #32624e;
  color: white;
}

main:has(.rest-background) {
  isolation: isolate;
  display: grid;
  align-items: center;
  max-width: none;
  min-height: calc(100svh - 80px);
  margin: 0;
  padding: 2rem 5%;
}

.rest-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #f6f3e8;
}

.rest-background[data-pattern="blur"] {
  background: #f6f3e8 url('/assets/rest-pattern-blur-sage.png') center / cover no-repeat;
}

.rest-background[data-pattern="green"] {
  background:
    radial-gradient(ellipse 86% 64% at 100% 100%, rgb(194 208 184 / 62%) 0 76%, transparent 99%),
    radial-gradient(ellipse 73% 53% at 85% 100%, #e2e8d8 0 91%, transparent 100%),
    #f3f4eb;
}

.rest-background[data-pattern="orange"] {
  background:
    radial-gradient(ellipse 133% 73% at 38% 15%, #faf5e9 0 88%, #f4e8d1 96%, #eedbc0 100%);
}

.rest-background[data-pattern="yellow"] {
  background: linear-gradient(148deg, #f5ebc8 0%, #f9f5e5 52%, #f7f4eb 100%);
}

@media (max-width: 540px) {
  .rest-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

main:has(.rest-background) .rest-options button[aria-pressed="false"] {
  background: rgb(237 241 224 / 80%);
}

.rest-panel .eyebrow {
  color: #47685c;
}

body:has(.rest-background) header,
body:has(.rest-background) footer {
  background: rgb(255 254 249 / 92%);
}

body:has(.rest-background) footer {
  position: relative;
}