.notification-device
{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 24px;
    margin-bottom: 24px;
}
.notification-device h2, .notification-card h2
{
    margin: 0 0 6px;
    font-size: 18px;
}
.notification-device p
{
    margin: 0;
}
.notification-device > [role="status"], .notification-device details
{
    grid-column: 1 / -1;
}
.notification-device summary
{
    cursor: pointer;
    color: var(--green);
    padding: 8px 0;
}
.notification-device-status:not(:empty)
{
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--sage);
    color: var(--ink);
    font-size: 13px;
}
.notification-device-status:empty
{
    display: none;
}
[data-push-enable]:disabled, [data-push-disable]:disabled
{
    opacity: .6;
    cursor: wait;
}
.notification-preferences
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.notification-device-actions, .notification-actions, .notification-meta
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
}
.notification-tabs
{
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 12px;
    margin-bottom: 14px;
}
.notification-tabs a
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface);
    font-size: 13px;
}
.notification-tabs a.active
{
    background: var(--green);
    border-color: var(--green);
    color: white;
}
.notification-tabs span
{
    font-size: 11px;
    opacity: .8;
}
.notification-list
{
    display: grid;
    gap: 12px;
}
.notification-card
{
    display: flex;
    gap: 18px;
    padding: 24px;
}
.notification-card.unread
{
    border-inline-start: 3px solid var(--green);
}
.notification-copy
{
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
}
.notification-meta
{
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 10px;
}
.notification-copy p
{
    margin: 0 0 16px;
    color: var(--muted);
}
.push-invitation
{
    position: fixed;
    inset: auto auto 24px 24px;
    z-index: 145;
    width: min(380px, calc(100vw - 32px));
    padding: 24px;
    box-shadow: 0 12px 40px #142a2426;
}
.push-invitation h2
{
    margin: 0;
    font-size: 20px;
}
.push-invitation p
{
    color: var(--muted);
    margin: 10px 0 18px;
}
.push-invitation > div
{
    display: flex;
    align-items: center;
    gap: 18px;
}
[data-push-invitation][hidden], [data-push-enable][hidden], [data-push-disable][hidden]
{
    display: none;
}
@media (max-width: 600px)
{
    .notification-device, .notification-preferences
    {
        grid-template-columns: minmax(0, 1fr);
    }
    .notification-card
    {
        padding: 18px;
        gap: 12px;
    }
    .notification-card .metric-icon
    {
        display: none;
    }
    .notification-device-actions .button
    {
        width: 100%;
    }
    .push-invitation
    {
        left: 16px;
        bottom: 90px;
    }
}