/* Normal routed article page: the site's shell stays visible, without a modal. */
#app:has(#news-article-view:not([hidden])) { height:calc(100dvh / var(--ui-zoom,1)); min-height:0; overflow:hidden; }
.content:has(> #news-article-view:not([hidden])) { display:flex; flex-direction:column; height:100%; min-height:0; overflow:hidden; }
#news-article-view:not([hidden]) { display:flex; flex:1 1 auto; flex-direction:column; min-width:0; min-height:0; padding:0; overflow:hidden; background:var(--foam); }
#public-news-reader:not([hidden]) { height:calc(100dvh / var(--ui-zoom,1)); max-width:100%; }
#public-news-reader > #news-article-view { height:100%; }
.news-reader-toolbar { flex:none; display:flex; align-items:center; min-height:44px; padding:0 24px; }
.news-reader-toolbar > button { min-height:44px; padding:8px 0; color:var(--sea); font-size:13px; }
.news-reader-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:0 24px 20px; scrollbar-width:thin; scrollbar-color:var(--muted) transparent; }
.news-reader-scroll > article,.news-reader-scroll > .news-comments { max-width:880px; margin-inline:auto; }
#news-article-content { container-type:inline-size; }
.news-article-head { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:16px; margin:0 0 24px; }
.news-article-photo { min-width:0; width:100%; max-width:520px; }
.news-article-photo > .news-cover { display:block; width:100%; height:auto; aspect-ratio:16/9; max-height:210px; margin:0; object-fit:contain; object-position:left top; }
.news-article-photo > .data-saver-image.news-cover { display:flex; height:auto; min-height:0; background:var(--mist); }
.news-article-heading { min-width:0; }
.news-article-heading > time { display:block; color:var(--muted); font-size:12px; line-height:1.5; }
.news-article-heading > h2 { margin:8px 0 0; font:500 24px/1.3 Georgia,serif; overflow-wrap:anywhere; }
@container(min-width:620px) {
 .news-article-head { grid-template-columns:minmax(0,.38fr) minmax(0,.62fr); gap:24px; }
 .news-article-photo { max-width:none; }
 .news-article-photo > .news-cover { height:auto; max-height:230px; }
 .news-article-photo > .data-saver-image.news-cover { height:auto; }
 .news-article-heading > h2 { font-size:26px; }
 .news-article-head-no-photo { grid-template-columns:minmax(0,1fr); }
}
#news-article-content > a { display:block; margin-top:16px; color:var(--sea); text-align:right; font-size:13px; overflow-wrap:anywhere; }
#news-article-view .news-comments { margin-top:24px; padding-top:16px; }
#news-article-view .news-comments > h3 { margin:0 0 12px; font:600 16px/1.4 var(--font-body,Arial,sans-serif); }
#news-article-content .news-article-document { font-size:15px; line-height:1.65; }
#news-article-content .news-article-document .ql-editor img { display:block; max-width:100%; max-height:65dvh; width:auto; height:auto; object-fit:contain; margin:18px auto; cursor:zoom-in; }
#news-comment-list > .empty { margin:0; padding:16px 0; border:0; text-align:left; font-size:13px; }
#news-comment-form.news-comment-composer { position:relative; flex:none; display:flex; align-items:flex-end; gap:6px; min-width:0; max-width:100%; min-height:70px; margin:0; padding:12px 24px max(12px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--composer-surface,var(--mist)); }
#news-comment-form.news-comment-composer[hidden],#news-comment-login[hidden] { display:none; }
#news-comment-form > textarea { flex:1 1 0; min-width:0; width:0; height:44px; min-height:44px; max-height:112px; margin:0; padding:8px 10px; resize:none; box-sizing:border-box; overflow-x:hidden; overflow-y:hidden; scrollbar-width:none; font:16px/22px var(--font-body,Arial,sans-serif); }
#news-comment-form > textarea::-webkit-scrollbar { display:none; width:0; height:0; }
#news-comment-form > .emoji-insert { order:0; flex:0 0 44px; display:grid; place-items:center; width:44px; height:44px; min-height:44px; margin:0; padding:0; border:0; background:transparent; color:var(--sea); font-size:22px; }
#news-comment-form > .primary { flex:0 0 44px; display:grid; place-items:center; width:44px; min-width:44px; height:44px; min-height:44px; margin:0; padding:0; }
#news-comment-form .send-label { display:none; }
#news-comment-form .send-icon { display:block; width:22px; height:22px; }
#news-comment-form > .emoji-grid { position:fixed; inset:auto; margin:0; z-index:10000; display:grid; grid-template-columns:repeat(4,44px); gap:2px; width:200px; max-width:calc(100vw / var(--ui-zoom,1) - 16px); max-height:60dvh; overflow:auto; padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--foam); box-shadow:0 10px 26px #17232f33; }
#news-comment-form > .emoji-grid[hidden] { display:none; }
#news-comment-form > .emoji-grid button { width:44px; height:44px; min-height:44px; margin:0; padding:0; border:0; border-radius:6px; background:transparent; box-shadow:none; font-size:19px; }
#news-comment-form > .emoji-grid button:is(:hover,:focus-visible) { background:var(--mist); outline:1px solid var(--sea); outline-offset:-1px; }
#news-comment-login { flex:none; margin:0; padding:12px 24px; border-top:1px solid var(--line); background:var(--composer-surface,var(--mist)); font-size:13px; line-height:1.5; }
@media(max-width:650px) {
 #app:has(#news-article-view:not([hidden])),#public-news-reader:not([hidden]) { height:calc(var(--phone-height,100dvh) / var(--ui-zoom,1)); }
 .news-reader-toolbar { padding-inline:16px; }
 .news-reader-scroll { padding:0 16px 16px; }
 .news-article-head { gap:12px; margin-bottom:20px; }
 .news-article-photo > .news-cover { max-height:180px; }
 .news-article-photo > .data-saver-image.news-cover { height:auto; }
 .news-article-heading > h2 { font-size:21px; }
 #news-article-content .news-article-document .ql-editor img { max-height:55dvh; }
 #news-comment-form.news-comment-composer { min-height:62px; padding:8px 12px max(8px,env(safe-area-inset-bottom)); gap:4px; }
 #news-comment-login { padding:12px 16px max(12px,env(safe-area-inset-bottom)); }
}