/* Empty/cold-start state, centered with a maple-leaf mark. Used by the feed,
   search, and profile empty states (class="blank-slate"). */

@layer components {
  .blank-slate {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    /* Sets --panel-padding so the roomy inset wins when composed with .panel
       (deals empty state), and reads it for the standalone case (search,
       profile) — no padding re-declaration, so load order can't clobber it. */
    --panel-padding: 4rem 1.5ch;
    padding: var(--panel-padding);
  }

  .blank-slate__leaf {
    color: color-mix(in oklch, var(--color-primary), transparent 55%);

    .maple-leaf {
      inline-size: 3rem;
      block-size: 3rem;
    }
  }

  .blank-slate__title {
    font-size: var(--text-large);
    font-weight: 700;
    text-wrap: balance;
  }

  .blank-slate__sub {
    max-inline-size: 22.5rem;
    margin-block-end: 0.5rem;
    font-size: var(--text-small);
    color: var(--color-text-subtle);
  }
}