/* PIN 00314 — official notice in the social feed (own file so browsers cannot keep a stale site.css) */
#staff-notice-reader.staff-notice-feed-card {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 0.55rem;
    padding: 0.9rem 1rem 1rem !important;
    color: var(--text);
    background: color-mix(in srgb, var(--warning, #d97706) 18%, var(--surface, #fff)) !important;
    border: 1px solid color-mix(in srgb, var(--warning, #d97706) 40%, var(--border, #e2e8f0)) !important;
    border-left: 4px solid var(--warning, #d97706) !important;
    border-radius: var(--radius, 0.65rem) !important;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 8%, transparent);
}

[data-theme="dark"] #staff-notice-reader.staff-notice-feed-card,
[data-theme="dim"] #staff-notice-reader.staff-notice-feed-card {
    background: color-mix(in srgb, var(--warning, #d97706) 24%, var(--surface, #1e293b)) !important;
}

#staff-notice-reader.staff-notice-reader[hidden] {
    display: none !important;
}

.staff-notice-feed-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.staff-notice-feed-badge {
    display: inline-block !important;
    padding: 0.18rem 0.55rem !important;
    border-radius: 999px !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--surface, #fff) !important;
    background: var(--warning, #d97706) !important;
}

[data-theme="dark"] .staff-notice-feed-badge {
    color: var(--text, #e2e8f0) !important;
}

.staff-notice-feed-title {
    font-size: calc(1rem + 1pt) !important;
    font-weight: 600 !important;
    color: var(--text) !important;
}

.staff-notice-feed-text {
    font-size: calc(0.88rem + 2pt) !important;
    line-height: 1.55;
    color: var(--text) !important;
}

#staff-notice-reader .staff-notice-feed-foot .btn {
    /* rem + pt: follows html[data-font-size] small/medium/large/x-large like post text */
    font-size: calc(0.88rem + 2pt) !important;
    font-weight: 500;
    line-height: 1.3;
    padding: 0.42em 0.95em !important;
}

.staff-notice-feed-foot {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.5rem;
    margin-top: 0.35rem;
    padding-top: 0.7rem;
    border-top: 1px solid color-mix(in srgb, var(--warning, #d97706) 22%, var(--border, #e2e8f0));
}

.staff-notice-feed-foot .staff-notice-skip-btn {
    grid-column: 1 !important;
    justify-self: start !important;
}

.staff-notice-feed-foot .staff-notice-read-btn {
    grid-column: 2 !important;
    justify-self: end !important;
    white-space: nowrap;
}

#staff-notice-reader:not(.is-preview) #staff-notice-reader-close-btn,
#staff-notice-reader:not(.is-preview) #staff-notice-reader-close-btn[hidden] {
    display: none !important;
}

#staff-notice-reader.is-preview #staff-notice-skip-btn,
#staff-notice-reader.is-preview #staff-notice-read-btn {
    display: none !important;
}

#staff-notice-reader.is-urgent .staff-notice-skip-btn {
    display: none !important;
}

#staff-notice-reader.is-urgent .staff-notice-feed-foot {
    grid-template-columns: 1fr !important;
}

#staff-notice-reader.is-urgent .staff-notice-read-btn {
    grid-column: 1 !important;
    justify-self: stretch !important;
    width: 100% !important;
}

#staff-notice-reader.is-urgent .staff-notice-feed-badge {
    background: var(--danger, #dc2626) !important;
}

#staff-notice-reader.is-urgent.staff-notice-feed-card {
    border-left-color: var(--danger, #dc2626) !important;
    background: color-mix(in srgb, var(--danger, #dc2626) 12%, var(--surface, #fff)) !important;
}

[data-theme="dark"] #staff-notice-reader.is-urgent.staff-notice-feed-card,
[data-theme="dim"] #staff-notice-reader.is-urgent.staff-notice-feed-card {
    background: color-mix(in srgb, var(--danger, #dc2626) 18%, var(--surface, #1e293b)) !important;
}

@media (max-width: 768px) {
    .staff-notice-feed-foot {
        grid-template-columns: 1fr !important;
    }

    .staff-notice-feed-foot .staff-notice-read-btn {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        justify-self: stretch !important;
    }

    .staff-notice-feed-foot .staff-notice-skip-btn {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        justify-self: stretch !important;
    }
}