/* Shared news bell and four-item preview; copied to css/news-ui.css for the site. */
.cn-news-toggle,.cn-news-toggle *,.cn-news-panel,.cn-news-panel * { box-sizing: border-box; }
.cn-news-toggle { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; padding: 7px 7px 7px 17px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-ink); font: 14px/1.2 var(--font-sans); cursor: pointer; }
.cn-news-bell { position: relative; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: #efedf8; color: var(--color-brand); animation: cn-news-glow 3s ease-in-out infinite; }
.cn-news-bell svg { animation: cn-news-ring 6s ease-in-out infinite; transform-origin: 50% 15%; }
.cn-news-dot { display: block; position: absolute; right: 1px; top: 1px; width: 10px; height: 10px; border: 2px solid white; border-radius: 50%; background: #e74650; }
.cn-news-toggle:focus-visible,.cn-news-panel a:focus-visible,.cn-news-panel button:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 4px; }
/* Keep the page width when a modal hides the vertical scrollbar. */
html { scrollbar-gutter: stable; }
body.cn-news-open { overflow: hidden; }
.cn-news-panel { position: fixed; inset: 16px 16px auto auto; margin: 0; width: 520px; max-width: calc(100% - 32px); max-height: calc(100dvh - 32px); padding: 20px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-ink); box-shadow: 0 20px 80px #25203740; font-family: var(--font-sans); }
.cn-news-panel::backdrop { background: #24233266; }
.cn-news-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cn-news-eyebrow { display: block; margin-bottom: 5px; color: var(--color-brand); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.cn-news-panel__head h2 { font-size: 27px; line-height: 1.1; letter-spacing: -.025em; margin: 0; }
.cn-news-close { display: grid; place-items: center; flex: 0 0 auto; width: 39px; height: 39px; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background: white; color: var(--color-ink); font: 28px/1 var(--font-sans); cursor: pointer; }
.cn-news-panel .cn-news-preview__item { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--color-border); color: var(--color-ink); text-decoration: none; line-height: 1.3; }
.cn-news-panel .cn-news-preview__item:not(:has(img)) { grid-template-columns: minmax(0, 1fr); }
.cn-news-panel .cn-news-preview__item > img { display: block; width: 96px; height: 80px; margin: 0; align-self: center; object-fit: cover; border-radius: var(--radius-sm); }
.cn-news-panel .cn-news-preview__item > div { min-width: 0; }
.cn-news-panel .cn-news-preview__item time { display: block; margin: 0; color: var(--color-muted); font-size: 11px; line-height: 1.3; }
.cn-news-panel .cn-news-preview__item h3 { padding: 0; font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; margin: 4px 0 0; }
.cn-news-panel .cn-news-preview__item p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding: 0; margin: 6px 0 0; color: var(--color-muted); font-size: 13px; line-height: 1.4; }
.cn-news-panel .cn-news-preview__item:hover h3 { color: var(--color-brand); }
.cn-news-all { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 6px; padding: 11px 18px; border-radius: var(--radius-pill); background: var(--color-brand); color: white; font-size: 16px; font-weight: 700; text-decoration: none; }
.cn-news-all:hover { background: var(--color-brand-hover); }
.cn-news-all span { font-size: 23px; font-weight: 400; }
@keyframes cn-news-glow { 0%,100% { box-shadow: 0 0 0 0 #5a57a223; } 50% { box-shadow: 0 0 0 6px #5a57a20c,0 0 18px #5a57a225; } }
@keyframes cn-news-ring { 0%,6%,12%,100% { transform: rotate(0); } 2%,8% { transform: rotate(12deg); } 4%,10% { transform: rotate(-12deg); } }
@media (max-width:479px) {
  .cn-news-toggle { padding: 6px 6px 6px 12px; font-size: 12px; gap: 8px; }
  .cn-news-bell { width: 31px; height: 31px; }
  .cn-news-panel { inset: 8px 8px auto; width: calc(100% - 16px); max-width: none; max-height: calc(100dvh - 16px); padding: 16px; border-radius: 20px; }
  .cn-news-panel__head h2 { font-size: 24px; }
}
@media (prefers-reduced-motion:reduce) { .cn-news-bell,.cn-news-bell svg { animation: none; } }

/* Icon-only control in the shared site header. */
.cn-news-toggle { justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; }
.cn-news-toggle .cn-news-bell { width: 35px; height: 35px; }