/* ArticlePreview (store/235) — editor preview of an article, any status */

/* Notice strip above the article; shaped as .membership-paused-banner, not sticky */
.article-preview-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background-color: var(--status-warning-bg);       /* amber-100 */
    color: var(--status-warning-text);                   /* amber-900 — meets 4.5:1 on amber-100 */
    border-bottom: 1px solid var(--warning); /* amber-500 */
    font-size: 0.95rem;
    line-height: 1.4;
}

.article-preview-notice i {
    flex-shrink: 0;
    font-size: 1.25rem;
}

.article-preview-notice-text {
    flex: 1 1 13rem;
    margin: 0;
}

.article-preview-notice-error {
    margin: 0;
    font-weight: 600;
}

/* Status buttons for an active admin: outlined, the current status filled */
.article-preview-status-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.article-preview-status-button {
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--status-warning-text);
    border-radius: 6px;
    background-color: transparent;
    color: var(--status-warning-text);
    font-weight: 600;
    cursor: pointer;
}

.article-preview-status-button:focus-visible {
    outline: 2px solid var(--status-warning-text);
    outline-offset: 2px;
}

.article-preview-status-button.is-current {
    background-color: var(--status-warning-text);
    color: var(--surface); /* not --status-warning-bg, which is translucent in the dark theme */
    cursor: default;
}

.article-preview-status-button[aria-disabled="true"]:not(.is-current) {
    opacity: 0.6;
    cursor: default;
}

@media (forced-colors: active) {
    .article-preview-status-button.is-current {
        border-width: 3px;
    }
}

/* Signed-out notice while the sign-in starts; as .profile-edit-auth-guard */
.article-preview-auth {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.article-preview-auth-message {
    text-align: center;
    color: var(--text-secondary, #4B5563);
    font-size: 1.125rem;
}

.article-preview-auth-message i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
    opacity: 0.5;
}