/* The announcement inherits the established light Apple-style reading surface. */
html.announcement-open { overflow: hidden; }
#announcement-dialog { box-sizing: border-box; width: min(620px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 40px); margin: auto; padding: 0; border: 0; border-radius: 24px; background: #fff; color: #1d1d1f; box-shadow: 0 30px 100px #0003; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", sans-serif; overflow: auto; }
#announcement-dialog[open] { display: flex; flex-direction: column; animation: announcement-enter 280ms cubic-bezier(.16,1,.3,1); }
#announcement-dialog::backdrop { background: #08080880; backdrop-filter: blur(7px); }
.announcement-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 28px 0; color: #626269; font-size: 13px; }
#announcement-dialog button { font: inherit; cursor: pointer; border: 0; min-height: 44px; }
#announcement-dialog .announcement-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: #f5f5f7; color: #515158; }
.announcement-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.announcement-reading { padding: 18px 36px 30px; overflow: auto; }
#announcement-title { font-size: clamp(25px, 4vw, 34px); font-weight: 600; line-height: 1.3; letter-spacing: -.03em; margin: 0 0 16px; overflow-wrap: anywhere; }
#announcement-time { color: #626269; font-size: 12px; line-height: 1.7; margin: 0 0 28px; }
#announcement-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.9; }
#announcement-dialog footer { display: flex; justify-content: flex-end; padding: 20px 36px 28px; border-top: 1px solid #eeeef0; }
#announcement-dialog .announcement-confirm { border-radius: 24px; background: #0071e3; color: white; padding: 12px 30px; font-size: 14px; }
#announcement-dialog .announcement-confirm:hover { background: #0062c4; }
#announcement-dialog .announcement-close:hover { background: #e8e8ed; }
#announcement-dialog :focus-visible, .announcement-editor :focus-visible { outline: 3px solid #0071e3; outline-offset: 4px; }
#announcement-dialog ::selection { background: #c8e2ff; color: #1d1d1f; }
.announcement-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.announcement-editor { padding: 32px; background: white; border-radius: 24px; }
.announcement-editor h2, .announcement-published h2 { margin: 0 0 24px; font-size: 22px; }
.announcement-editor label { display: grid; gap: 10px; margin-bottom: 24px; font-size: 14px; }
.announcement-editor textarea { min-height: 310px; resize: vertical; line-height: 1.8; }
.announcement-editor input, .announcement-editor textarea { width: 100%; box-sizing: border-box; }
.announcement-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.announcement-editor .announcement-help, .announcement-published p { color: #626269; font-size: 13px; line-height: 1.8; }
.announcement-published { padding-block: 12px; min-width: 0; }
.announcement-published h3 { font-size: 19px; line-height: 1.5; margin: 20px 0 12px; overflow-wrap: anywhere; }
.announcement-published .announcement-excerpt { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 230px; overflow: auto; color: #1d1d1f; margin: 20px 0; }
.announcement-status { min-height: 24px; font-size: 13px; line-height: 1.8; margin: 14px 0 0; }
.announcement-published button { margin-top: 18px; }
@keyframes announcement-enter { from { opacity: .45; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .announcement-layout { grid-template-columns: 1fr; gap: 28px; } .announcement-editor { padding: 24px 20px; } .announcement-editor textarea { min-height: 250px; } .announcement-published { padding: 0 4px; } .announcement-actions button { flex: 1 1 auto; } .announcement-reading { padding: 18px 24px 26px; } .announcement-top { padding: 16px 16px 0 24px; } #announcement-dialog footer { padding: 18px 24px 24px; } }
@media (prefers-reduced-motion: reduce) { #announcement-dialog[open] { animation: none; } }
/* Static heading receives screen-reader focus; only interactive controls need a focus ring. */
#announcement-title:focus { outline: none; }