/* finesse · component: site-notifications · register=product
 * Existing graphite/PingFang/white-text identity; isolated from canvas pages.
 * States: loading, empty, unread, read, error, hover, focus, disabled. */
body:not(.canvas-studio){--notice-bg:#1e2023;--notice-raised:#292c30;--notice-line:rgba(235,238,242,.1);--notice-focus:#c3c4ca;--notice-ink:#fff}
body:not(.canvas-studio).roc-notification-modal-open{overflow:hidden}
body:not(.canvas-studio) .roc-notification-launcher{position:relative;flex:none;display:grid;place-items:center;width:38px;min-width:38px;height:38px;padding:0;border:1px solid var(--notice-line);border-radius:50%;background:var(--notice-bg);color:var(--notice-ink);cursor:pointer}
body:not(.canvas-studio) .roc-notification-count{position:absolute;top:-5px;right:-6px;min-width:17px;padding:1px 4px;border-radius:99px;background:#4b5058;border:2px solid var(--notice-bg);font:600 10px/1.4 var(--ui-font);text-align:center}
body:not(.canvas-studio) .roc-notification-count[hidden]{display:none}
body:not(.canvas-studio) .roc-broadcast-ribbon{position:relative;z-index:61;display:flex;align-items:center;gap:14px;height:38px;padding:0 24px;background:#202127;border-bottom:1px solid var(--notice-line);color:var(--notice-ink);font:12px/1.5 var(--ui-font)}
body:not(.canvas-studio) .roc-broadcast-symbol{display:flex;align-items:center;gap:8px;flex:none}
body:not(.canvas-studio) .roc-broadcast-viewport{flex:1;min-width:0;overflow:hidden}
body:not(.canvas-studio) .roc-broadcast-track{display:flex;align-items:center;width:max-content;transform:translateX(0)}
body:not(.canvas-studio) .roc-broadcast-track button{border:0;background:transparent;padding:7px 0;white-space:nowrap;font:inherit;cursor:pointer}
body:not(.canvas-studio) .roc-broadcast-ribbon.is-overflowing .roc-broadcast-track{animation:roc-notice-ticker var(--roc-ticker-duration,20s) linear infinite}
body:not(.canvas-studio) .roc-broadcast-ribbon:is(:hover,:focus-within) .roc-broadcast-track{animation-play-state:paused}
@keyframes roc-notice-ticker{from{transform:translateX(var(--roc-ticker-start,-100%))}to{transform:translateX(var(--roc-ticker-end,100vw))}}
body:not(.canvas-studio) .roc-broadcast-title{display:flex;align-items:center;gap:8px;max-width:32%;flex:none;min-width:0;padding:5px 0;border:0;background:transparent;font:600 12px/1.5 var(--ui-font);cursor:pointer}
body:not(.canvas-studio) .roc-broadcast-title>svg{flex:none}
body:not(.canvas-studio) .roc-broadcast-title>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body:not(.canvas-studio) .roc-broadcast-next{flex:none;min-width:36px;padding:4px;border:0;background:transparent;font:11px/1.5 var(--ui-font);cursor:pointer}
body:not(.canvas-studio).roc-has-broadcast .workspace-rail{top:38px;height:calc(100dvh - 38px)}
body:not(.canvas-studio).production-detail-page.roc-has-broadcast #app{height:calc(100dvh - 38px)}
body:not(.canvas-studio) .production-workspace-header .roc-notification-launcher{width:34px;min-width:34px;height:34px}
body:not(.canvas-studio) .roc-notification-dialog{--notice-action:#42474f;position:fixed;inset:0;box-sizing:border-box;color:var(--notice-ink);background:var(--notice-bg);border:1px solid var(--notice-line);padding:0;margin:auto;font:14px/1.6 var(--ui-font);box-shadow:0 32px 100px rgba(8,10,14,.46),0 1px 0 rgba(255,255,255,.035) inset;max-width:calc(100vw - 48px);max-height:min(780px,calc(100dvh - 48px));border-radius:24px;overflow:hidden}
body:not(.canvas-studio) .roc-notification-dialog::backdrop{background:rgba(8,10,13,.64);backdrop-filter:blur(5px);animation:roc-notice-backdrop-enter 260ms ease-out}
body:not(.canvas-studio) .roc-notification-dialog[open]{display:flex;flex-direction:column;animation:roc-notice-enter 260ms cubic-bezier(.16,1,.3,1) both}
body:not(.canvas-studio) .roc-notification-dialog[open].is-closing{animation:roc-notice-exit 180ms cubic-bezier(.4,0,1,1) both}
body:not(.canvas-studio) .roc-notification-dialog.is-closing::backdrop{animation:roc-notice-backdrop-exit 180ms ease-in both}
@keyframes roc-notice-enter{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes roc-notice-exit{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(8px) scale(.985)}}
@keyframes roc-notice-backdrop-enter{from{opacity:0}to{opacity:1}}
@keyframes roc-notice-backdrop-exit{from{opacity:1}to{opacity:0}}
body:not(.canvas-studio) .roc-notification-drawer{width:720px;min-height:min(480px,calc(100dvh - 48px))}
body:not(.canvas-studio) .roc-announcement-card{width:600px}
body:not(.canvas-studio) .roc-notification-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 28px 20px;border-bottom:1px solid var(--notice-line);flex:none}
body:not(.canvas-studio) .roc-notification-head h2{display:flex;align-items:center;gap:12px;margin:0;font-size:19px;line-height:1.4;font-weight:600;min-width:0}
body:not(.canvas-studio) .roc-notification-head .roc-notification-unread-label{font-size:11px;font-weight:400;background:var(--notice-raised);padding:3px 9px;border:1px solid var(--notice-line);border-radius:99px;white-space:nowrap}
body:not(.canvas-studio) .roc-notification-heading-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border:1px solid var(--notice-line);border-radius:12px;background:var(--notice-raised)}
body:not(.canvas-studio) .roc-notification-head .icon-button{display:grid;place-items:center;flex:none;width:40px;height:40px;min-width:40px;padding:0;border:1px solid transparent;border-radius:12px;background:transparent;cursor:pointer}
body:not(.canvas-studio) .roc-announcement-brand{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500}
body:not(.canvas-studio) .roc-notification-tabs{display:flex;gap:5px;margin:20px 28px 12px;padding:5px;background:#191b1e;border:1px solid var(--notice-line);border-radius:15px;flex:none}
body:not(.canvas-studio) .roc-notification-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:0;min-height:40px;padding:8px 12px;border:1px solid transparent;border-radius:10px;background:transparent;font:500 13px/1.5 var(--ui-font);white-space:nowrap;cursor:pointer}
body:not(.canvas-studio) .roc-notification-tabs button>svg{width:16px;height:16px;flex:none}
body:not(.canvas-studio) .roc-notification-tabs button[aria-pressed=true]{background:var(--notice-raised);border-color:var(--notice-line);box-shadow:0 2px 5px #0002}
body:not(.canvas-studio) .roc-notification-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 20px 24px;scrollbar-width:none}
body:not(.canvas-studio) :is(.roc-notification-content,.roc-announcement-card>.roc-announcement-presentation,.roc-announcement-card>.roc-notification-detail)::-webkit-scrollbar{display:none}
body:not(.canvas-studio) .roc-notification-row{display:flex;align-items:flex-start;gap:12px;width:100%;border:1px solid transparent;border-radius:16px;background:transparent;padding:18px 16px;text-align:left;font:inherit;cursor:pointer}
body:not(.canvas-studio) .roc-notification-row+.roc-notification-row{margin-top:6px}
body:not(.canvas-studio) .roc-notification-row.is-unread{background:var(--notice-raised);border-color:var(--notice-line)}
body:not(.canvas-studio) .roc-notification-dot{width:6px;height:6px;flex:none;background:transparent;border-radius:50%;margin-top:8px}
body:not(.canvas-studio) .is-unread .roc-notification-dot{background:var(--notice-ink)}
body:not(.canvas-studio) .roc-notification-row>span:nth-child(2){display:block;min-width:0;flex:1}
body:not(.canvas-studio) .roc-notification-row strong{display:block;font-size:15px;font-weight:500;line-height:1.6;overflow-wrap:anywhere}
body:not(.canvas-studio) .roc-notification-excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-size:13px;line-height:1.75;margin-top:5px}
body:not(.canvas-studio) .roc-notification-row small{display:block;font-size:11px;margin-top:10px}
body:not(.canvas-studio) .roc-notification-row>svg{flex:none;margin-top:4px}
body:not(.canvas-studio) .roc-notification-footer{display:flex;justify-content:space-between;gap:12px;padding:18px 28px;border-top:1px solid var(--notice-line);flex:none}
body:not(.canvas-studio) .roc-notification-dialog :is(button,summary){color:var(--notice-ink)}
body:not(.canvas-studio) .roc-notification-dialog button{transition:background-color 160ms ease,border-color 160ms ease,transform 160ms ease}
body:not(.canvas-studio) .roc-notification-dialog .secondary{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;background:var(--notice-raised);border:1px solid var(--notice-line);border-radius:11px;padding:8px 14px;font:500 12px/1.5 var(--ui-font);white-space:nowrap;cursor:pointer}
body:not(.canvas-studio) .roc-notification-dialog button:active:not(:disabled){transform:translateY(1px)}
body:not(.canvas-studio) .roc-notification-dialog button:disabled{opacity:.45;cursor:default}
body:not(.canvas-studio) .roc-notification-empty{text-align:center;padding:64px 24px 72px}
body:not(.canvas-studio) .roc-notification-empty>svg{box-sizing:content-box;width:28px;height:28px;margin:0 auto 20px;padding:17px;background:var(--notice-raised);border:1px solid var(--notice-line);border-radius:20px;stroke-width:1.4}
body:not(.canvas-studio) .roc-notification-empty h3{font-size:16px;font-weight:500;margin:0 0 8px}
body:not(.canvas-studio) .roc-notification-empty p{font-size:12px;margin:0}
body:not(.canvas-studio) .roc-notification-error:not(:empty){margin:4px 28px 12px;padding:10px 12px;border:1px solid #9f5e6a66;background:#36262d;border-radius:10px;font-size:12px;flex:none}
body:not(.canvas-studio) .roc-notification-dialog .roc-notification-more{display:flex;width:max-content;max-width:100%;margin:16px auto 0}
body:not(.canvas-studio) .roc-notification-back{display:inline-flex;align-items:center;gap:8px;min-height:40px;background:transparent;border:0;border-radius:10px;padding:8px 12px;font:500 12px/1.5 var(--ui-font);white-space:nowrap;cursor:pointer}
body:not(.canvas-studio) .roc-notification-back>svg{transform:rotate(180deg)}
body:not(.canvas-studio) .roc-notification-detail{padding:24px 16px}
body:not(.canvas-studio) .roc-notification-label{font-size:11px;display:block;margin-bottom:12px}
body:not(.canvas-studio) .roc-notification-detail h3{font-size:20px;font-weight:600;line-height:1.5;margin:0 0 18px;overflow-wrap:anywhere}
body:not(.canvas-studio) .roc-notification-body{font-size:14px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere}
body:not(.canvas-studio) .roc-notification-read-state{font-size:11px;margin:24px 0 0}
body:not(.canvas-studio) .roc-announcement-card>.roc-notification-detail{padding:28px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
body:not(.canvas-studio) .roc-announcement-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--notice-line);padding:18px 24px;flex:none}
body:not(.canvas-studio) .roc-announcement-actions>span{font-size:12px;white-space:nowrap}
body:not(.canvas-studio) .roc-announcement-actions>div{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
body:not(.canvas-studio) .roc-announcement-actions .primary{background:var(--notice-action)!important;border-color:var(--notice-line)!important;border-radius:11px;min-height:40px;padding:8px 16px;font-size:12px;white-space:nowrap}
body:not(.canvas-studio) .roc-announcement-card[data-theme=violet]{--notice-action:#65537f}
body:not(.canvas-studio) .roc-announcement-card[data-theme=blue]{--notice-action:#365b76}
body:not(.canvas-studio) .roc-announcement-card[data-theme=amber]{--notice-action:#705b37}
body:not(.canvas-studio) .roc-announcement-row{border:1px solid var(--notice-line);border-radius:14px;margin:0 0 10px;background:#202226}
body:not(.canvas-studio) .roc-announcement-row summary{display:flex;align-items:flex-start;gap:10px;padding:16px;cursor:pointer;font-size:14px;list-style:none}
body:not(.canvas-studio) .roc-announcement-row summary::-webkit-details-marker{display:none}
body:not(.canvas-studio) .roc-announcement-row summary>svg{flex:none;margin-top:2px}
body:not(.canvas-studio) .roc-announcement-row summary>span{min-width:0;flex:1;overflow-wrap:anywhere}
body:not(.canvas-studio) .roc-announcement-row summary small{display:block;font-size:11px;margin-top:6px}
body:not(.canvas-studio) .roc-announcement-row .roc-notification-body{padding:0 16px 18px;font-size:13px}
body:not(.canvas-studio) :is(.roc-notification-dialog,.roc-broadcast-ribbon) :is(button,summary):focus-visible,body:not(.canvas-studio) .roc-notification-launcher:focus-visible{outline:2px solid var(--notice-focus);outline-offset:2px}
@media(hover:hover){body:not(.canvas-studio) :is(.roc-notification-launcher,.roc-notification-row,.roc-notification-back,.roc-notification-dialog .secondary,.roc-notification-head .icon-button):hover{background:#33373d}}
@media(max-width:760px){
 body:not(.canvas-studio) .roc-broadcast-ribbon{gap:10px;padding:0 12px}
 body:not(.canvas-studio).roc-has-broadcast .workspace-rail{top:auto;height:64px}
 body:not(.canvas-studio) .roc-notification-launcher{height:40px;width:40px;min-width:40px}
 body:not(.canvas-studio) .workspace-account{gap:7px}
 body:not(.canvas-studio) .roc-notification-dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:24px}
 body:not(.canvas-studio) .roc-notification-drawer{width:720px;min-height:min(480px,calc(100dvh - 24px))}
 body:not(.canvas-studio) .roc-notification-head{padding:18px 18px 16px;gap:10px}
 body:not(.canvas-studio) .roc-notification-head h2{font-size:17px;gap:9px}
 body:not(.canvas-studio) .roc-notification-heading-icon{display:none}
 body:not(.canvas-studio) .roc-notification-head .icon-button{height:44px;width:44px;min-width:44px}
 body:not(.canvas-studio) .roc-notification-tabs{margin:16px 18px 10px}
 body:not(.canvas-studio) .roc-notification-tabs button{min-height:44px;padding:8px}
 body:not(.canvas-studio) .roc-notification-content{padding:2px 10px 18px}
 body:not(.canvas-studio) .roc-notification-row{padding:16px 12px;gap:10px}
 body:not(.canvas-studio) .roc-notification-error:not(:empty){margin:4px 18px 10px}
 body:not(.canvas-studio) .roc-notification-dialog :is(.secondary,.primary){min-height:44px}
 body:not(.canvas-studio) .roc-announcement-card>.roc-notification-detail{padding:22px}
 body:not(.canvas-studio) .roc-announcement-actions{padding:16px 18px;gap:10px}
 body:not(.canvas-studio) .roc-notification-footer{padding:16px 18px max(16px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
 body:not(.canvas-studio) .roc-broadcast-ribbon .roc-broadcast-track{animation:none!important;transform:none!important}
 body:not(.canvas-studio) .roc-broadcast-viewport{overflow-x:auto;scrollbar-width:none}
 body:not(.canvas-studio) .roc-notification-dialog[open],body:not(.canvas-studio) .roc-notification-dialog::backdrop{animation:none!important}
 body:not(.canvas-studio) .roc-notification-dialog button{transition:none!important}
}

/* One presentation shared by published cards, inbox and administrator previews. */
.roc-announcement-presentation{--announcement-accent:#b8bbc4;--announcement-wash:#ffffff04;min-width:0;background:var(--announcement-wash);text-align:left}
.roc-announcement-presentation[data-theme=violet]{--announcement-accent:#b9a0dd;--announcement-wash:#a184cf12}
.roc-announcement-presentation[data-theme=blue]{--announcement-accent:#8cb9dc;--announcement-wash:#75acd012}
.roc-announcement-presentation[data-theme=amber]{--announcement-accent:#dbc08f;--announcement-wash:#d3ad6a12}
.roc-announcement-presentation .roc-announcement-copy{padding:26px 28px;border-top:2px solid var(--announcement-accent)}
.roc-announcement-presentation :is(h2,h3,h4){font-size:22px;font-weight:600;line-height:1.5;margin:0 0 16px;overflow-wrap:anywhere}
.roc-announcement-presentation .roc-notification-body{font-size:14px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere}
.roc-announcement-presentation .roc-notification-label{display:block;font-size:11px;margin:0 0 12px}
.roc-announcement-presentation[data-align=center]{text-align:center}
.roc-announcement-media{background:#101215;padding:16px 16px 0}
.roc-announcement-media img{display:block;max-width:100%;width:auto;max-height:280px;height:auto;object-fit:contain;margin:0 auto;border-radius:12px}
.roc-announcement-presentation[data-layout=poster] .roc-announcement-media{padding:0}
.roc-announcement-presentation[data-layout=poster] .roc-announcement-media img{width:100%;max-height:440px;border-radius:0}
.roc-announcement-presentation[data-layout=poster] .roc-announcement-copy{padding-top:30px;padding-bottom:30px}
body:not(.canvas-studio) .roc-announcement-card>.roc-announcement-presentation{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
body:not(.canvas-studio) .roc-announcement-row .roc-announcement-presentation{border-radius:0 0 14px 14px;overflow:hidden}
body:not(.canvas-studio) .roc-announcement-row .roc-announcement-copy{padding:18px}
body:not(.canvas-studio) .roc-announcement-row .roc-announcement-copy .roc-notification-body{padding:0}
body:not(.canvas-studio) .roc-announcement-row .roc-announcement-copy h3{font-size:17px}
body:not(.canvas-studio) .roc-broadcast-ribbon[data-theme=violet] .roc-broadcast-title{box-shadow:inset 0 -2px #b9a0dd88}
body:not(.canvas-studio) .roc-broadcast-ribbon[data-theme=blue] .roc-broadcast-title{box-shadow:inset 0 -2px #8cb9dc88}
body:not(.canvas-studio) .roc-broadcast-ribbon[data-theme=amber] .roc-broadcast-title{box-shadow:inset 0 -2px #dbc08f88}
.notification-preview-dialog .roc-announcement-presentation{border-radius:14px;overflow:hidden;margin:14px 0}
@media(max-width:760px){
 .roc-announcement-presentation .roc-announcement-copy{padding:22px}
 .roc-announcement-presentation :is(h2,h3,h4){font-size:20px}
 .roc-announcement-presentation[data-layout=poster] .roc-announcement-media img{max-height:330px}
}