/* Reading overlays share a reachable close control and reserve its own space. */
.login-image-lightbox,
.login-article-modal,
#viewPhotoModal {
    --reader-viewport: 100vh;
    --reader-top: max(16px, calc(env(safe-area-inset-top, 0px) + 12px));
    --reader-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    --reader-left: max(12px, calc(env(safe-area-inset-left, 0px) + 12px));
    --reader-right: max(12px, calc(env(safe-area-inset-right, 0px) + 12px));
}

@supports (height: 100dvh) {
    .login-image-lightbox,
    .login-article-modal,
    #viewPhotoModal { --reader-viewport: 100dvh; }
}

.app-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 88px;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid #cbdde6;
    border-radius: 12px;
    color: #154765;
    background: #fff;
    box-shadow: 0 4px 14px rgba(8, 47, 73, .14);
    font: 700 14px/1.2 system-ui, sans-serif;
    cursor: pointer;
    touch-action: manipulation;
}

.app-modal-close:hover { background: #edf9f7; color: #0f766e; }
.app-modal-close:focus-visible { outline: 3px solid #0284c7; outline-offset: 3px; }

.login-image-lightbox > .app-modal-close,
#viewPhotoModal > .app-modal-close {
    position: fixed;
    top: var(--reader-top);
    right: var(--reader-right);
    z-index: 2;
    width: auto;
    height: 48px;
    transform: none;
}

.login-image-lightbox {
    box-sizing: border-box;
    padding: calc(var(--reader-top) + 60px) var(--reader-right) var(--reader-bottom) var(--reader-left);
}

.login-image-lightbox .login-lightbox-panel {
    max-width: 100%;
    max-height: 100%;
}

.login-image-lightbox .login-lightbox-panel img {
    max-width: min(920px, calc(100vw - var(--reader-left) - var(--reader-right) - 24px));
    max-height: calc(var(--reader-viewport) - var(--reader-top) - var(--reader-bottom) - 132px);
}

#viewPhotoModal .modal-dialog {
    max-width: calc(100vw - var(--reader-left) - var(--reader-right)) !important;
    margin-top: calc(var(--reader-top) + 60px) !important;
    margin-bottom: var(--reader-bottom) !important;
    min-height: calc(var(--reader-viewport) - var(--reader-top) - var(--reader-bottom) - 60px);
}

#viewPhotoModal .modal-content { max-width: 100% !important; }
#viewPhotoModal #bigPhotoTitle { max-width: 100%; }

#viewPhotoModal #bigPhoto {
    max-width: calc(100vw - var(--reader-left) - var(--reader-right)) !important;
    max-height: calc(var(--reader-viewport) - var(--reader-top) - var(--reader-bottom) - 132px) !important;
}

.login-article-modal {
    box-sizing: border-box;
    padding: var(--reader-top) var(--reader-right) var(--reader-bottom) var(--reader-left);
}

.login-article-modal .login-article-panel {
    display: flex;
    flex-direction: column;
    width: min(820px, 100%);
    max-height: calc(var(--reader-viewport) - var(--reader-top) - var(--reader-bottom));
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
}

.login-article-toolbar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid #e2ecf1;
    color: #526977;
    background: #f6fafb;
    font: 600 13px/1.4 system-ui, sans-serif;
}

.login-article-toolbar .app-modal-close {
    position: static;
    width: auto;
    height: 48px;
    margin: 0;
}

.login-article-scroll {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: clamp(16px, 3vw, 28px);
}

.login-article-panel .login-article-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
}

.login-article-head > img {
    order: 1;
    max-height: 200px;
    aspect-ratio: 16 / 7;
    object-fit: contain;
    background: #f3f7fa;
    box-shadow: none;
}

.login-article-head .login-article-title {
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.login-article-title :where(p, span, strong, b, em, i, u) {
    font-size: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
}

.login-article-content { margin-top: 16px; }

/* Normalize pasted Word typography at render time; retain emphasis and content. */
.reader-copy {
    color: #334655;
    font: 400 16px/1.6 system-ui, -apple-system, sans-serif;
    overflow-wrap: anywhere;
}

.reader-copy :where(p, div, li, span, font) {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

.reader-copy :where(p, div) {
    margin: 0 0 .7em !important;
    text-indent: 0 !important;
    text-align: start !important;
}

.reader-copy p:empty { display: none; }
.reader-copy :where(ul, ol) { margin: .5em 0 .85em !important; padding-inline-start: 1.4em !important; }
.reader-copy li { margin: .35em 0 !important; }
.reader-copy li > :last-child { margin-bottom: 0 !important; }
.reader-copy :where(h1, h2, h3, h4, h5, h6) {
    margin: 1.1em 0 .45em !important;
    font-family: inherit !important;
    font-size: 1.1em !important;
    line-height: 1.4 !important;
    color: #154765;
}
.reader-copy h1 { font-size: 1.35em !important; }
.reader-copy h2 { font-size: 1.2em !important; }
.reader-copy img { max-width: 100% !important; height: auto !important; }
.reader-copy table { width: 100% !important; max-width: 100%; table-layout: fixed; }
.reader-copy :where(th, td) { overflow-wrap: anywhere; }

.article-detail-head,
.article-content.reader-copy { max-width: 80ch; margin-inline: auto; }
.article-detail h1 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.35; }
.article-detail-intro { padding: 12px; gap: 14px; }
.article-detail-thumb,
.article-detail-thumb img { min-height: 0; max-height: 180px; }

@media (max-width: 600px) {
    .login-image-lightbox,
    .login-article-modal,
    #viewPhotoModal {
        /* Fallback also clears an embedded browser's status area when its inset is zero. */
        --reader-top: max(56px, calc(env(safe-area-inset-top, 0px) + 12px));
    }
    .login-article-head > img { max-height: 144px; }
    .article-detail-intro { grid-template-columns: 1fr; }
}