/* Public component pages and accessible native dialogs */
.media-dialog, .image-dialog { border: 0; padding: 38px; width: min(900px, calc(100% - 40px)); max-height: 90dvh; color: var(--color-text); background: var(--color-background); box-shadow: 0 30px 120px #0d354c50; overflow-y: auto; }
dialog::backdrop { background: #092a3fe0; backdrop-filter: blur(6px); }
.dialog-close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #afc8bb; border-radius: 50%; background: var(--color-background); font-size: 28px; margin-left: auto; margin-bottom: 10px; }
.media-dialog h2 { font-size: 32px; padding-right: 40px; margin-bottom: 23px; }
.media-dialog video { max-height: 55vh; aspect-ratio: 16/9; background: #123b4d; }
.media-dialog p { margin-top: 18px; }
.media-dialog [role="status"] { font-size: 13px; color: var(--color-accent); }
.image-dialog img { max-height: 65dvh; object-fit: contain; }
.image-dialog p { font-size: 14px; margin-top: 20px; }
.site-status { position: fixed; inset: auto 20px 20px; z-index: 90; max-width: 650px; background: #fff5d7; color: #4a3a10; border: 1px solid #d7c791; padding: 15px 20px; font-size: 13px; box-shadow: 0 5px 25px #082d3e15; }
.noscript { background: #e8f0da; padding: 20px; text-align: center; font-size: 14px; }
.reading { max-width: 900px; }
.legal-page, .source-page { padding-top: calc(var(--header-height) + 70px); }
.legal-page h1, .source-page h1 { font-size: clamp(40px, 7vw, 68px); margin: 22px 0 40px; }
.legal-part { margin: 36px 0; padding-top: 30px; border-top: 1px solid var(--line); }
.legal-part h2 { font-size: 28px; letter-spacing: -.02em; margin-bottom: 18px; }
.legal-part p { max-width: 760px; }
.source-page .source-alert { border-left: 3px solid var(--color-accent); margin-top: 22px; padding: 12px 20px; background: var(--color-opal); font-size: 14px; }
.source-group { margin-top: 60px; }
.source-group > h2 { font-size: 32px; border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 20px; }
.source-group > p { font-size: 14px; margin-bottom: 20px; }
.source-field { padding: 18px 22px; margin: 12px 0; border: 1px solid var(--line); background: var(--color-surface); overflow-wrap: anywhere; }
.source-field h3 { font: 500 13px/1.5 var(--sans); color: var(--color-muted); margin-bottom: 12px; }
.source-field h4 { font: 500 18px/1.5 var(--sans); }
.source-field img { max-width: 270px; height: 85px; object-fit: contain; background: #b6c9bf; padding: 8px; }
.source-field .source-link { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 560px) { .media-dialog, .image-dialog { padding: 20px; width: calc(100% - 24px); } .media-dialog h2 { font-size: 25px; padding: 0; } .source-field { padding: 15px; } }