/* Phone density pass. Desktop sizing, colour tokens and navigation stay intact. */
.phone-summary-badges,.phone-summary-icons { display:contents; }
.phone-badge-more,.phone-badge-panel:not(:popover-open) { display:none; }
/* Reactions belong to the payload, not below the neighbouring 44px menu. */
.live-message .message-payload > .msg-foot { margin-top:4px; }
.live-message .message-payload > .msg-foot:not(:has(.react-chip)) { display:none; }
.live-message .message-payload > .msg-foot > .react-row { margin-top:0; }
@media (min-width:651px) {
  .phone-badge-panel { display:none!important; }
}
@media (max-width:650px) {
  /* The legacy 111% desktop scale also magnified the phone layout. Use actual
     CSS pixels here; viewport/caret/PDF calculations already use this token. */
  :root { zoom:1!important; --ui-zoom:1!important; }

  /* The summary changes presentation only: every badge remains available in
     the native popover, with no duplicated icons or inaccessible clipping. */
  .phone-summary-badges { display:inline-flex; flex:none; align-items:center; gap:2px; min-width:0; vertical-align:middle; }
  .phone-summary-icons { display:inline-flex; align-items:center; gap:2px; }
  .name-with-badges:has(> .phone-summary-badges) { flex-wrap:nowrap; align-items:center; }
  .name-with-badges:has(> .phone-summary-badges) > :is(b,strong) { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .phone-summary-icons > .inline-badge-wrap:nth-child(n+3) { display:none; }
  .phone-summary-icons .inline-badge { width:16px; height:16px; }
  .phone-badge-more { display:inline-grid; place-items:center; flex:none; min-width:44px; min-height:44px; margin:0; padding:0; border:0; background:transparent; color:var(--sea); font:600 11px/1 Arial,sans-serif; }
  .phone-badge-more:hover,.phone-badge-more:focus-visible { background:var(--mist); }
  .phone-badge-panel:popover-open { display:block; width:min(320px,calc(100vw - 32px)); max-height:55dvh; overflow-y:auto; overscroll-behavior:contain; padding:14px; border:1px solid var(--line); background:var(--foam); color:var(--deep); box-shadow:0 6px 24px #0004; font:13px/1.4 Arial,sans-serif; }
  .phone-badge-panel > strong { display:block; margin-bottom:8px; font-size:14px; }
  .phone-badge-row { display:flex; align-items:center; gap:10px; padding:7px 0; }
  .phone-badge-row > img { width:24px; height:24px; object-fit:contain; flex:none; }
  .phone-badge-row > span { min-width:0; overflow-wrap:anywhere; }

  .content-header { min-height:60px; padding:8px 12px; gap:4px 6px; }
  .content-header h2,.thread-detail-view .content-header h2 { font-size:18px; line-height:1.3; }
  .content-header .overline { font-size:10px; margin-bottom:3px; }
  .content-header .search input { min-height:44px; font-size:16px; }
  #forum-view:not([hidden]),#news-view:not([hidden]) { padding-top:12px; }
  .composer-trigger { min-height:48px; gap:8px; padding:8px; font-size:14px; }
  .composer-trigger .avatar { width:28px; height:28px; }

  /* Keep the author/badges together, then category/date on a quieter line. */
  .thread-row { padding:12px 0; }
  .thread-row .thread-meta { grid-template-columns:30px minmax(0,1fr) auto; grid-template-rows:auto auto; gap:2px 7px; font-size:11px; }
  .thread-row .thread-meta > .avatar { width:30px; height:30px; grid-row:1/3; }
  .thread-row .thread-meta > .name-with-badges { grid-column:2/-1; grid-row:1; flex-wrap:nowrap; gap:3px; min-height:20px; }
  .thread-row .thread-meta > .name-with-badges > b { font-size:12px; overflow-wrap:anywhere; }
  .thread-row .thread-meta > span:not(.name-with-badges):not(.avatar) { grid-column:2; grid-row:2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .thread-row .thread-meta > time { grid-column:3; grid-row:2; font-size:10px; white-space:nowrap; }
  .thread-row .thread-meta .inline-badge-wrap { padding:1px; }
  .thread-row .thread-meta .inline-badge { width:16px; height:16px; }
  .thread-row h3 { font-size:16px; line-height:1.35; margin:8px 0 5px; }
  .thread-row > p { font-size:14px; line-height:1.45; -webkit-line-clamp:2; }
  .thread-footer { align-items:center; gap:2px 8px; margin-top:4px; }
  .thread-footer > .tag { width:auto; flex:0 1 auto; font-size:10px; }
  .thread-actions { width:auto; flex:1 1 auto; justify-content:flex-end; gap:2px; }
  .thread-actions button { min-height:44px; min-width:44px; padding:6px; font-size:11px; }
  .thread-pagination { gap:7px; flex-wrap:wrap; padding-top:16px; }
  .thread-pagination button { min-width:96px; min-height:44px; }

  /* One consistent carousel geometry, including logged-out and home views.
     Dots and pause retain separate 44px touch rows; the glyphs remain small. */
  .news-carousel,#auth .news-carousel,.is-home .news-carousel { height:350px; min-height:350px; margin:12px 0 16px; }
  .news-carousel .news-card.featured,.is-home .news-carousel .news-card.featured { grid-template-columns:minmax(0,1fr); grid-template-rows:118px minmax(0,1fr); }
  .news-carousel .news-card.featured > img,.news-carousel .news-card.featured > .news-placeholder,.news-carousel .news-card.featured > .data-saver-image { width:100%; height:118px; min-height:0; }
  .news-carousel .news-copy,#auth .news-carousel .news-copy { padding:10px 12px 88px; gap:4px; }
  .news-carousel .news-copy time { font-size:11px; line-height:14px; }
  .news-carousel .news-copy h3,#auth .news-carousel .news-copy h3,.is-home .news-carousel .news-copy h3 { font-size:18px; line-height:1.25; -webkit-line-clamp:2; }
  .news-carousel .news-copy p,#auth .news-carousel .news-copy p { font-size:14px; line-height:1.45; -webkit-line-clamp:2; max-height:2.9em; }
  .news-carousel .news-copy a { font-size:11px; line-height:16px; }
  .news-carousel .news-prev,.news-carousel .news-next { top:59px; transform:translateY(-50%); width:44px; height:44px; min-width:44px; min-height:44px; font-size:22px; }
  .news-carousel .news-prev { left:8px; }
  .news-carousel .news-next { left:auto; right:8px; }
  .news-carousel:has(.news-pause) .news-dots { left:8px; right:8px; bottom:44px; max-width:none; justify-content:center; padding:0; height:44px; }
  .news-carousel .news-pause { right:10px; bottom:0; min-height:44px; font-size:11px; padding:0 6px; }
  .news-carousel:not(:has(.news-dots,.news-pause)),#auth .news-carousel:not(:has(.news-dots,.news-pause)),.is-home .news-carousel:not(:has(.news-dots,.news-pause)) { height:auto; min-height:0; }
  .news-carousel:not(:has(.news-dots,.news-pause)) .news-card.featured { height:auto; grid-template-rows:118px auto; }
  .news-carousel:not(:has(.news-dots,.news-pause)) .news-copy,#auth .news-carousel:not(:has(.news-dots,.news-pause)) .news-copy { padding:10px 12px 12px; grid-template-rows:auto auto auto auto; }
  .news-grid .news-copy h3,.is-home .news-grid .news-copy h3,#auth .news-grid .news-copy h3 { font-size:16px; line-height:1.3; }
  .news-grid .news-copy p,.is-home .news-grid .news-copy p,#auth .news-grid .news-copy p { font-size:14px; line-height:1.45; }
  .home-popular { padding:12px; margin-top:16px; }
  .home-popular h3,.is-home .home-popular h3 { font-size:15px; }
  #home-popular-list { gap:8px; }
  .popular-thread { padding:10px 12px; gap:5px; }
  .popular-thread strong { font-size:14px; line-height:1.4; }

  /* Conversation text remains comfortably readable; compact the chrome only. */
  .live-chat-head { padding:8px 12px; gap:6px; }
  .live-chat-head h3 { font-size:18px; line-height:1.3; }
  .live-chat-head p { font-size:12px; line-height:1.4; margin:3px 0; }
  .live-chat-messages,.dm-content .messages { padding-inline:12px; }
  .live-message,.message.live-message { grid-template-columns:30px minmax(0,1fr); gap:8px; padding:7px 0; }
  .live-message > .avatar,.message.live-message > .avatar,.live-message .msg-side > .avatar,.message.live-message .msg-side > .avatar { width:30px; height:30px; }
  .live-message .thread-meta,.message.live-message .thread-meta { gap:4px 6px; font-size:12px; }
  .live-message .thread-meta time,.message.live-message .thread-meta time { font-size:10px; margin-left:0; }
  .live-message p,.message p,.reply p,#thread-scroll .thread-article .body { font-size:15px; line-height:1.5; }
  .live-message.grouped { padding:2px 0; }
  /* Phone message groups share one payload/actions row. A dedicated tools row
     used to add 44px of empty space after every consecutive message. Keep the
     full touch target beside the text, without changing forum reply layout. */
  :is(.live-chat-messages,.dm-content .messages) .live-message .msg-content-line { display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:start; gap:0 4px; }
  :is(.live-chat-messages,.dm-content .messages) .live-message .msg-content-line > .message-payload { width:auto; min-width:0; margin:0; }
  :is(.live-chat-messages,.dm-content .messages) .live-message .msg-content-line > .msg-tools { width:44px; min-width:44px; height:44px; min-height:44px; margin:0; padding:0; align-self:start; justify-content:center; }

  :is(.live-chat-messages,.dm-content .messages) .live-message .message-payload > p { margin:0; line-height:1.5; }
  :is(.live-chat-messages,.dm-content .messages) .live-message .msg-side > .side-stamp { display:block; margin:0; padding-top:1px; font:10px/22.5px Arial,sans-serif; white-space:nowrap; }
  :is(.live-chat-messages,.dm-content .messages) .live-message:not(.grouped) { padding-top:12px; padding-bottom:4px; }
  :is(.live-chat-messages,.dm-content .messages) .live-message.grouped { padding-block:1px; }
  :is(.live-chat-messages,.dm-content .messages) .live-message .message-image-link { width:fit-content; max-width:100%; }
  :is(.live-chat-messages,.dm-content .messages) .live-message .message-image { max-width:100%; }
  #thread-scroll .thread-article > .body { margin-top:12px; }
  #thread-scroll .thread-article-actions { gap:6px; margin-top:12px; }
  .thread-article-actions button,.thread-article-actions .follow { font-size:12px!important; padding:6px; }
  .reply-list { margin-top:14px; }
  .reply { padding:12px 0; }
  .reply .thread-meta { font-size:12px; gap:4px 6px; }
  .reply .thread-meta time { font-size:10px; }
  .dm-header { padding:6px 8px; gap:2px 6px; }
  .dm-peer { gap:8px; }
  .dm-peer .avatar { width:34px; height:34px; font-size:11px; }
  .dm-peer-copy .name-with-badges > b { font-size:15px; line-height:1.3; }
  .dm-header > .dm-header-badges { margin-left:46px; }
  .dm-header-badges:empty { display:none; }
  .dm-header:not(:has(> .dm-header-badges:not(:empty))) > .dm-peer { grid-column:2; }
  .dm-header:not(:has(> .dm-header-badges:not(:empty))) > .install-app-button { grid-row:1; }
  .conversation-button { gap:9px; font-size:14px; }
  .conversation-button strong { font-size:14px; line-height:1.3; }
  .conversation-button small { font-size:12px; line-height:1.4; }
  .conversation-button > .avatar,.conversation-button .avatar-wrap > .avatar { width:34px; height:34px; }
  #dm-navigation .conversation-item > .conversation-button { padding-right:48px; }
  :is(#reply-form,#live-chat-form,#dm-form) > textarea { font-size:16px; }

  /* The drawer stays familiar; small icons do not mean small tap targets. */
  .community-title { height:60px; min-height:60px; padding:8px 10px; }
  .community-title .community-home img { width:26px; height:26px; }
  .community-home #community-name { font-size:12px; }
  .channel { font-size:14px; line-height:1.3; min-height:44px; align-items:center; }
  .rail-label { font-size:10px; margin-top:14px; }
  .mobile-nav-open .user-strip > .self-details { gap:0 7px; }
  .mobile-nav-open .user-strip #self-name { font-size:14px; line-height:19px; }
  .mobile-nav-open .user-strip :is(#self-role,#self-premium) { font-size:11px; line-height:15px; min-height:15px; }
  .mobile-nav-open .user-strip .self-avatar-btn .avatar { width:34px; height:34px; }
  .mobile-nav-open .user-strip > .user-action-buttons > button :is(img,svg) { width:19px; height:19px; }

  /* Modal typography uses the same hierarchy, not desktop-sized headlines.
     The document reader's tested controls/pinch surface are intentionally left alone. */
  dialog:not(#document-reader) h2,.news-article-dialog h2 { font-size:22px; line-height:1.3; }
  .news-article-dialog > div { padding:16px; }
  .news-article-dialog > div > article > p,.news-article-document.ql-container.ql-snow { font-size:15px; line-height:1.6; }
  .news-comments > h3 { font-size:18px; }
  .news-article-document .ql-editor h2,.wob-thread-document .ql-editor h2,.wob-news-editor .ql-editor h2 { font-size:21px; line-height:1.35; }
  .news-article-document .ql-editor h3,.wob-thread-document .ql-editor h3,.wob-news-editor .ql-editor h3 { font-size:18px; line-height:1.35; }
  #compose-dialog .compose-fields { padding:14px; }
  #compose-dialog form > header { padding:12px 54px 12px 14px; }
  #compose-dialog .wob-news-editor-head { padding:8px 10px; }
  #compose-dialog .wob-news-toolbar.ql-toolbar.ql-snow { padding:3px; }
  #compose-dialog .wob-thread-editor .ql-editor { padding:12px; font-size:16px; }
  #compose-dialog .wob-thread-editor .ql-editor.ql-blank:before { left:12px; right:12px; }
  .settings-profile-head { padding-block:12px; }
  .settings-dialog h3 { font-size:18px; line-height:1.35; }
  .settings-plan { padding:12px; }
  .auth h1 { font-size:30px; line-height:1.1; }
  .auth-card { padding:22px; }
  .auth-logo { width:56px; height:56px; }
}

@media (max-width:360px) {
  .thread-footer > .tag { width:100%; }
  .thread-actions { justify-content:space-between; }
  .thread-row .thread-meta { grid-template-columns:28px minmax(0,1fr); }
  .thread-row .thread-meta > .name-with-badges { grid-column:2; }
  .thread-row .thread-meta > time { grid-column:2; grid-row:3; }
  .thread-row .thread-meta > .avatar { grid-row:1/4; }
  .news-carousel .news-copy h3 { font-size:17px; }
}