/* MatchVibe wave status: text carries the state; accents are decorative. */
#wave-banner {
  box-sizing: border-box;
  max-inline-size: 1160px;
  margin: 1rem auto;
  padding-inline: clamp(0.75rem, 2.5vw, 2rem);
}
.wave-banner {
  --wave-banner-bg: #11141b;
  --wave-banner-text: #f5f5f7;
  --wave-banner-muted: #c2c5ce;
  --wave-banner-accent: #ffbc68;
  --wave-banner-border: #514339;
  box-sizing: border-box;
  position: relative;
  display: grid;
  gap: 0.75rem;
  min-inline-size: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--wave-banner-border);
  border-radius: 1rem;
  background: var(--wave-banner-bg);
  color: var(--wave-banner-text);
  font-family: inherit;
  text-align: start;
  overflow-wrap: anywhere;
  isolation: isolate;
}

.wave-banner::before {
  content: "";
  display: block;
  inline-size: 3.5rem;
  block-size: 3px;
  margin-block-end: 0.25rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb23e 0%, #ff7a2f 45%, #ff2d6f 100%);
  pointer-events: none;
}

.wave-banner[data-tone="invited"] {
  --wave-banner-accent: #ffc58e;
  --wave-banner-border: #66513f;
}

.wave-banner[data-tone="admitted"] {
  --wave-banner-accent: #ffb3c5;
  --wave-banner-border: #614350;
}

.wave-banner[data-tone="unavailable"],
.wave-banner[data-tone="neutral"] {
  --wave-banner-accent: #cfd2db;
  --wave-banner-border: #414653;
}

.wave-banner .wave-banner-kicker {
  display: block;
  margin: 0;
  color: var(--wave-banner-accent);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.wave-banner .wave-banner-title {
  margin: 0;
  max-inline-size: 30ch;
  color: var(--wave-banner-text);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.wave-banner .wave-banner-body,
.wave-banner .wave-banner-detail {
  margin: 0;
  max-inline-size: 66ch;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  text-wrap: pretty;
}

.wave-banner .wave-banner-body {
  color: var(--wave-banner-text);
}

.wave-banner .wave-banner-detail {
  color: var(--wave-banner-muted);
  font-size: 0.875rem;
}

.wave-banner .wave-banner-detail time {
  color: inherit;
  font-variant-numeric: tabular-nums;
}

.wave-banner .wave-banner-action {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-inline-size: 0;
  min-block-size: 2.75rem;
  max-inline-size: 100%;
  margin-block-start: 0.5rem;
  padding: 0.625rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: #ffc170;
  color: #11141b;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  transition: background-color 140ms ease;
}

.wave-banner .wave-banner-action[href]:not([aria-disabled="true"]):hover {
  background: #ffd39a;
  color: #11141b;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.wave-banner .wave-banner-action:focus-visible {
  outline: 3px solid #f5f5f7;
  outline-offset: 4px;
}

.wave-banner .wave-banner-action[aria-disabled="true"],
.wave-banner .wave-banner-action:not([href]) {
  border-color: #747a88;
  background: transparent;
  color: var(--wave-banner-muted);
  cursor: default;
  text-decoration: none;
  transition: none;
}

.wave-banner .wave-banner-body:empty,
.wave-banner .wave-banner-detail:empty,
.wave-banner .wave-banner-action:empty {
  display: none;
}

@media (max-width: 30rem) {
  .wave-banner {
    gap: 0.625rem;
    border-radius: 0.75rem;
  }

  .wave-banner .wave-banner-action {
    justify-self: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wave-banner .wave-banner-action {
    transition: none;
  }
}

@media (forced-colors: active) {
  .wave-banner {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .wave-banner::before {
    background: CanvasText;
  }

  .wave-banner .wave-banner-kicker,
  .wave-banner .wave-banner-title,
  .wave-banner .wave-banner-body,
  .wave-banner .wave-banner-detail {
    color: CanvasText;
  }

  .wave-banner .wave-banner-action {
    border-color: LinkText;
    background: Canvas;
    color: LinkText;
  }

  .wave-banner .wave-banner-action[href]:not([aria-disabled="true"]):hover {
    background: Canvas;
    color: LinkText;
  }

  .wave-banner .wave-banner-action[aria-disabled="true"],
  .wave-banner .wave-banner-action:not([href]) {
    border-color: GrayText;
    color: GrayText;
  }

  .wave-banner .wave-banner-action:focus-visible {
    outline-color: Highlight;
  }
}

/* Home status is secondary to the creation workspace. The full personal
   waitlist card keeps its existing layout and detailed state copy. */
#wave-banner[data-wave-variant="compact"] {
  max-inline-size: none;
  margin: 0;
  padding: 0;
  background: var(--obsidian, #111318);
}

#wave-banner[data-wave-variant="compact"] .wave-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  min-block-size: 61px;
  padding: 8px max(14px, var(--safe-right, 0px)) 8px max(14px, var(--safe-left, 0px));
  border: 0;
  border-block-end: 1px solid #38342f;
  border-radius: 0;
  background: var(--obsidian, #111318);
}

#wave-banner[data-wave-variant="compact"] .wave-banner::before,
#wave-banner[data-wave-variant="compact"] .wave-banner-kicker,
#wave-banner[data-wave-variant="compact"] .wave-banner-body,
#wave-banner[data-wave-variant="compact"] .wave-banner-detail {
  display: none;
}

#wave-banner[data-wave-variant="compact"] .wave-banner-title {
  flex: 1 1 auto;
  min-inline-size: 0;
  max-inline-size: none;
  color: #eee5dc;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: normal;
  text-wrap: pretty;
}

#wave-banner[data-wave-variant="compact"] .wave-banner-action {
  flex: 0 0 auto;
  min-block-size: 44px;
  margin: 0;
  padding: 8px 14px;
  border-color: #655343;
  border-radius: 6px;
  background: transparent;
  color: #ffc987;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 650;
}

#wave-banner[data-wave-variant="compact"] .wave-banner-action[href]:not([aria-disabled="true"]):hover {
  border-color: #ffc987;
  background: #282019;
  color: #ffe1b8;
}

/* Remove the pale moat introduced around the home notification and studio;
   original hero/sidebar geometry, artwork and styles remain untouched. */
#main:has(> #wave-banner[data-wave-variant="compact"]):has(> #screen-start:not([hidden])) {
  background: var(--obsidian, #111318);
}

#wave-banner[data-wave-variant="compact"] + #screen-start .start-content {
  background: var(--obsidian, #111318);
}

@media (max-width: 35rem) {
  #wave-banner[data-wave-variant="compact"] .wave-banner {
    flex-wrap: wrap;
    gap: 4px 12px;
    padding-block: 10px;
  }

  #wave-banner[data-wave-variant="compact"] .wave-banner-title {
    flex-basis: 100%;
  }

  #wave-banner[data-wave-variant="compact"] .wave-banner-action {
    justify-self: start;
  }
}

@media (forced-colors: active) {
  #wave-banner[data-wave-variant="compact"],
  #wave-banner[data-wave-variant="compact"] .wave-banner {
    background: Canvas;
  }

  #wave-banner[data-wave-variant="compact"] .wave-banner {
    border-block-end-color: CanvasText;
  }

  #wave-banner[data-wave-variant="compact"] .wave-banner-title {
    color: CanvasText;
  }

  #wave-banner[data-wave-variant="compact"] .wave-banner-action,
  #wave-banner[data-wave-variant="compact"] .wave-banner-action[href]:not([aria-disabled="true"]):hover {
    border-color: LinkText;
    background: Canvas;
    color: LinkText;
  }
}

/* Lower home sections retain their original light reading surface. Their
   inherited ink, cards, spacing and layout are unchanged. The hero gutter
   and compact wave strip remain on the dark studio canvas. */
#wave-banner[data-wave-variant="compact"] + #screen-start .start-content > :is(.library, .connect, .examples) {
  background: var(--surface-canvas, #f5f6f7);
}