/* ==========================================================================
   Empty — a first visit, designed as carefully as the full page
   ==========================================================================

   A mark that is visible, a 20/500 title, one paragraph, doors that are
   44px buttons. Five private empty states existed when this was written
   (.empty-state in list-pages.css, .memory-empty, .prompts-page__empty,
   .notifications-empty, .empty-state--dashboard); the next screen gets this
   one to reuse and the five migrate onto it.

   ⛔ The mark is `--text-muted`, NOT `--primary-light`: the notifications
   bell was painted --primary-light on --background at 1.09:1 and was, for
   practical purposes, not there. (Not `--ink-faint` either — it is the
   non-text token and tests/core/test_css_extraction.py refuses it on a
   `color:` line, stroke or not.)
   ========================================================================== */

.empty {
    max-width: 32rem;
    padding: var(--space-xl) 0;
}

.empty__mark {
    display: inline-flex;
    margin-bottom: var(--space-sm);
    color: var(--text-muted);
}

.empty__title {
    margin: 0 0 var(--space-2xs);
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--text-color);
}

.empty__text {
    margin: 0 0 var(--space-md);
    font-size: var(--text-base-sm);
    line-height: 1.6;
    color: var(--text-secondary);
}

/* `.btn .btn-primary` + `.btn .btn-quiet`, per the control-hierarchy table. */
.empty__doors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* The "yours" line under an empty Memory: what she has, when the page has
   nothing to show her yet. */
.empty__yours {
    padding-top: var(--space-sm);
    border-top: var(--border-width) solid var(--border-color);
}