/* Where an empty state sits: the profile's compact one spans its sheet, the template picker's ends on the list, a field's suggestions keep the menu's inset. */
:where(html[data-visual="v5"]) .cs-profile .cs-empty--compact { max-inline-size: none; margin-inline: 0; border-radius: var(--ds-radius-xl); background: var(--ds-bg-pure); }
.cs-tmpl-picker__empty > .cs-empty { padding-block-end: 0; }
.ds-menu--listbox > .cs-empty { padding-inline: var(--ds-space-3); }

.cs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--ds-space-3);
  max-inline-size: 420px;
  margin-inline: auto;
  padding-block: 3rem;
}

.cs-empty--compact {
  gap: var(--ds-space-2);
  padding-block: var(--ds-space-6);
}

.cs-empty__icon {
  display: grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
  margin-block-end: var(--ds-space-2);
  border-radius: 20px;
  background-color: var(--ds-accent-soft);
  color: var(--ds-accent-strong);
}

.cs-empty__icon :is(svg, img) {
  inline-size: 34px;
  block-size: 34px;
}

.cs-empty__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--ds-weight-bold);
  color: var(--ds-text);
}

.cs-empty__text {
  margin: 0;
  max-inline-size: 40ch;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ds-text-muted);
}

.cs-empty--compact .cs-empty__text { font-size: var(--ds-font-size-compact); }

.cs-empty__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-2); margin-block-start: var(--ds-space-3); }

.cs-empty--error .cs-empty__text { color: var(--ds-negative); }

/* v5: the icon stands loose, and empty and loading keep one height so the swap does not jump. */
html[data-visual="v5"] .cs-empty { min-block-size: 12rem; }
html[data-visual="v5"] .cs-empty--compact { min-block-size: 4.5rem; }

html[data-visual="v5"] .cs-empty__icon {
  inline-size: auto;
  block-size: auto;
  margin: 0;
  border-radius: 0;
  background: none;
  color: var(--ds-text-muted);
}

html[data-visual="v5"] .cs-empty__icon svg {
  inline-size: 32px;
  block-size: 32px;
}

html[data-visual="v5"] .cs-empty__title {
  font-size: var(--ds-font-size-lg);
  font-weight: var(--ds-weight-semibold);
}

html[data-visual="v5"] .cs-empty__text { font-size: var(--ds-font-size-sm); }
html[data-visual="v5"] .cs-empty--compact .cs-empty__text { font-size: var(--ds-font-size-compact); }

/* A whole pane with nothing open, on the drawn paper: the module's mark, a larger title and a line
   that says what is waiting. Same in both visuals, since only v5 pages carry the paper. */
.cs-empty--pane {
  position: relative;
  gap: var(--ds-space-2);
  max-inline-size: 520px;
  padding-inline: var(--ds-space-6);
}

/* The paper clears softly behind the mark and the words, so no drawing runs through them; the
   mosaic is back in full a few rem out. */
.ds-wallpaper-host .cs-empty--pane::before {
  content: "";
  position: absolute;
  inset: -2rem -4rem;
  z-index: -1;
  background: radial-gradient(closest-side, var(--ds-bg-chat) 55%, transparent);
  pointer-events: none;
}

.cs-empty--pane .ds-wallpaper-mark { margin-block-end: var(--ds-space-4); }
.cs-empty--pane .cs-empty__title { font-size: var(--ds-font-size-2xl); font-weight: var(--ds-weight-semibold); }
.cs-empty--pane .cs-empty__text { font-size: var(--ds-font-size-base); }
.cs-empty--pane .cs-empty__cta { margin-block-start: var(--ds-space-2); }

html[data-visual="v5"] .cs-empty--pane .cs-empty__title { font-size: var(--ds-font-size-2xl); }
html[data-visual="v5"] .cs-empty--pane .cs-empty__text { font-size: var(--ds-font-size-base); }

.cs-empty__counts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The number after the tab's name, as the status tabs print theirs; tabular so a count changing does not shift the row. */
.cs-empty__count {
  font-variant-numeric: tabular-nums;
  font-weight: var(--ds-weight-semibold);
}