/* Translucent homepage notice; retain solid text and accessible focus indicators. */
html.notice-is-open { overflow: hidden; }
dialog.notice-dialog { width: min(320px, calc(100vw - 40px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: auto; padding: 20px 0 0; border: 0; border-radius: 10px; background: rgb(255 255 255 / 80%); color: var(--ink); box-shadow: 0 12px 48px #0000001a; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); overflow: hidden; }
dialog.notice-dialog[open] { display: flex; flex-direction: column; }
dialog.notice-dialog::backdrop { background: rgb(18 19 25 / 20%); backdrop-filter: none; }
.notice-heading { flex-shrink: 0; max-height: 24dvh; padding: 0 20px; overflow: auto; }
dialog.notice-dialog .notice-heading h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.notice-body { flex: 0 1 auto; min-height: 0; max-height: min(42dvh, 280px); padding: 10px 20px 12px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
dialog.notice-dialog p.notice-content { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.notice-footer { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 20px 12px; border: 0; }
.notice-optout { display: flex; align-items: center; gap: 7px; min-height: 44px; color: var(--ink); font-size: 12px; cursor: pointer; user-select: none; }
.notice-optout input { flex-shrink: 0; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.notice-optout span { white-space: nowrap; }
.notice-footer .notice-close { min-width: 56px; min-height: 44px; padding: 8px 10px; margin: 0; border: 0; border-radius: 5px; background: transparent; box-shadow: none; color: var(--muted); font-size: 13px; }
.notice-footer .notice-close:hover { color: var(--ink); }
.notice-dialog :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.notice-dialog #notice-title:focus { outline: none; }
:root[data-theme="dark"] dialog.notice-dialog { background: rgb(35 35 44 / 80%); box-shadow: 0 12px 48px #00000026; }