/* A shared application with compositions that fit the available workspace.
   Mobile retains its authored scenes; desktop uses the same controls and data. */
.crab-h5 .nav .desktop-brand,
.crab-h5 .desktop-nav-tools,
.crab-h5 .desktop-page-title,
.crab-h5 .nav.crab-wide-nav { display: none; }
@media (min-width: 600px) {
  html.crab-h5-root, body.crab-h5 { background: var(--sand); }
  .crab-h5 #phone-screen.phone-screen { width: 100%; max-width: none; height: 100dvh; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .crab-h5 .mobile-scroll { scrollbar-width: thin; scrollbar-color: #201C2238 transparent; }
  .crab-h5 .mobile-scroll::-webkit-scrollbar { display: block; width: 6px; }
  .crab-h5 .mobile-scroll::-webkit-scrollbar-thumb { background: #201C2238; border-radius: 5px; }
  .crab-h5 .crab-grid { grid-template-columns: repeat(var(--responsive-columns, 2), minmax(0,1fr)); }
  .crab-h5 .discover-view .sand { padding-inline: 28px; }
  .crab-h5 .discover-view .sky { padding-inline: 28px; }
  .crab-h5 .discover-view .headline { max-width: 80%; font-size: 27px; white-space: normal; }
  .crab-h5 .discover-view .searchwrap { left: 28px; right: 28px; }
  .crab-h5 .discover-view .tabs { max-width: 620px; margin-inline: auto; }
  .crab-h5 .profile-overlay { width: min(100%,760px); }
  .crab-h5 .profile-menu-overlay { width: 100%; }
  .crab-h5 .profile-menu-overlay .profile-overlay-sheet { width: 360px; max-width: 78%; }
}
/* An intermediate canvas keeps tablet reading comfortable. */
@media (min-width: 768px) and (max-width: 959px) {
  .crab-h5 .mobile-app > .mobile-scroll { width: 100%; max-width: 880px; margin-inline: auto; padding-inline: 28px; }
  .crab-h5 .discover-view > .mobile-scroll,
  .crab-h5 .profile-social > .profile-scroll { padding-inline: 0; }
  .crab-h5 .crab-grid { gap: 20px; }
  .crab-h5 .feed-column { gap: 20px; }
  .crab-h5 .scene-weekend .event-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
}
@media (max-width: 360px) {
  .crab-h5 .scene-sent .publication-preview h3,
  .crab-h5 .scene-sent .publication-event-content h3 { font-size: 18px; }
  .crab-h5 .scene-sent .publication-meta { gap: 7px; }
}
@media (min-width: 960px) {
  .crab-h5 { --desktop-rail: 184px; --desktop-gutter: 32px; --desktop-content: 1200px; }
  .crab-h5 .mobile-app { position: relative; padding-left: var(--desktop-rail); background: var(--surface); }
  .crab-h5 .mobile-app.chat-view { padding-left: 0; }
  .crab-h5 .mobile-app > .mobile-scroll { width: 100%; max-width: 800px; margin-inline: auto; padding: 30px 32px 40px; }
  .crab-h5 .mobile-app > .mobile-scroll:has(+ .crab-nav) { padding-bottom: 40px; }
  /* My posts: the same publication records use wider reading and photo columns. */
  .crab-h5 .mobile-app.scene-sent { background: var(--sand); }
  .crab-h5 .scene-sent > .mobile-scroll { max-width: 1040px; }
  .crab-h5 .scene-sent .mobile-header { justify-content: flex-start; gap: 16px; }
  .crab-h5 .scene-sent .mobile-header .back-button { position: static; flex: none; }
  .crab-h5 .scene-sent .mobile-header h3 { margin: 0 auto 0 0; font-size: 24px; text-align: left; }
  .crab-h5 .scene-sent .publication-entry { padding: 18px 22px 14px; }
  .crab-h5 .scene-sent .publication-preview .crab-card:has(.card-visual),
  .crab-h5 .scene-sent .publication-event-content.has-photo { grid-template-columns: minmax(0,1fr) 140px; }
  .crab-h5 .scene-sent .publication-preview .card-visual,
  .crab-h5 .scene-sent .publication-event-photo { width: 140px; height: 124px; }
  /* A short activity draft needs only one content/action row, with no empty tray. */
  .crab-h5 .scene-sent .own-event.publication-entry:has(.publication-controls:not(:empty)):not(:has(.publication-event-excerpt,.publication-event-facts,.own-event-reason)) { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 24px; }
  .crab-h5 .scene-sent .own-event.publication-entry:has(.publication-controls:not(:empty)):not(:has(.publication-event-excerpt,.publication-event-facts,.own-event-reason)) .publication-meta { grid-column: 1 / -1; }
  .crab-h5 .scene-sent .own-event.publication-entry:has(.publication-controls:not(:empty)):not(:has(.publication-event-excerpt,.publication-event-facts,.own-event-reason)) .publication-controls { grid-column: 2; grid-row: 2; margin: 0; align-self: start; }
  .crab-h5 .mobile-app > .mobile-header { flex: none; width: 100%; max-width: none; min-height: 80px; margin: 0; padding: 18px var(--desktop-gutter); border-bottom: 1px solid var(--line); background: var(--surface); }
  .crab-h5 .mobile-header h3 { font-size: 20px; }
  .crab-h5 .phone-screen::after { left: var(--desktop-rail); }
  .crab-h5 .phone-screen:is([data-screen="chat"],[data-screen="event-chat"])::after { left: 0; }
  /* The very same five route controls become a stable desktop navigation. */
  .crab-h5 .nav.crab-nav { position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; width: var(--desktop-rail); height: 100%; padding: 30px 18px 24px; border: 0; border-right: 1px solid #D9CFBC; border-radius: 0; background: #F9F3E7; box-shadow: none; transform: none; overflow-y: auto; }
  .crab-h5 .nav.crab-nav::before, .crab-h5 .nav.crab-nav::after,
  .crab-h5 .crab-nav-tide, .crab-h5 .navcrab { display: none; }
  .crab-h5 .nav.crab-nav > button { order: 1; display: flex; flex: none; justify-content: flex-start; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 12px; border: 1px solid transparent; border-radius: 12px; color: var(--ink-2); font: 600 15px/1.5 var(--sans); text-align: left; }
  .crab-h5 .nav.crab-nav > button:hover { background: #EDE5D7; }
  .crab-h5 .nav.crab-nav > button.on { border-color: #C0D7E4; background: #E1EEF4; color: var(--ink); }
  .crab-h5 .nav.crab-nav > button.on::after { content: ''; position: absolute; top: 18px; bottom: 18px; left: -1px; width: 3px; border-radius: 2px; background: var(--coral); }
  .crab-h5 .nav.crab-nav > button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .crab-h5 .nav.crab-nav button .obj,
  .crab-h5 .nav.crab-nav button.on .obj,
  .crab-h5 .nav.crab-nav button.taken .obj { flex: none; width: 34px; height: 32px; margin: 0; opacity: 1; transform: none; }
  .crab-h5 .nav.crab-nav button .beach-item { opacity: 1; }
  .crab-h5 .nav.crab-nav > .post { order: 2; margin-top: 18px; min-height: 50px; border-color: var(--ink); background: var(--coral); color: var(--ink); box-shadow: 2px 3px 0 var(--ink); }
  .crab-h5 .nav.crab-nav > .post:hover { background: #FF9C89; }
  .crab-h5 .nav.crab-nav > .post.on { border-color: var(--ink); background: var(--coral); }
  .crab-h5 .nav.crab-nav .post-art { width: 30px; height: 30px; }
  .crab-h5 .nav.crab-nav > button.desktop-brand { order: 0; display: block; min-height: 90px; margin: 0 0 26px; padding: 0 14px; border: 0; border-radius: 0; background: none; color: var(--ink); font: 900 27px/1.12 var(--sans); letter-spacing: -.9px; }
  .crab-h5 .desktop-brand span { color: var(--coral); }
  .crab-h5 .desktop-nav-tools { order: 3; display: grid; gap: 4px; margin-top: auto; padding-top: 42px; }
  .crab-h5 .desktop-nav-tools button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 6px 12px; color: var(--muted); font: 500 13px/1.5 var(--sans); text-align: left; }
  .crab-h5 .desktop-nav-tools svg { flex: none; width: 19px; height: 19px; }
  /* Discover: one compact horizontal welcome/search workspace, then stories. */
  .crab-h5 .discover-view > .mobile-scroll { display: grid; grid-template-columns: minmax(0,1fr) minmax(290px,.82fr); grid-template-rows: auto 1fr; align-content: start; align-items: start; max-width: var(--desktop-content); padding: 32px var(--desktop-gutter) 36px; }
  .crab-h5 .discover-view .sky { grid-column: 1; grid-row: 1; min-height: 174px; margin-right: -1px; padding: 24px 22px 22px 28px; border-radius: 18px 0 0 18px; overflow: visible; background: var(--sky-top); }
  .crab-h5 .discover-view .wordmark { display: none; }
  .crab-h5 .discover-view h1.headline { max-width: 100%; margin: 0 0 16px; padding-right: 14px; font-size: 26px; line-height: 1.4; letter-spacing: -.6px; text-wrap: balance; }
  .crab-h5 .discover-view .locrow { margin-top: 0; flex-wrap: wrap; gap: 10px; }
  .crab-h5 .discover-view .sky > .sun { right: -44px; top: 25px; width: 30px; height: 30px; }
  .crab-h5 .discover-view .sky > .cloud { right: -76px; top: 35px; width: 58px; height: 25px; }
  .crab-h5 .discover-view .sky > .gull { display: none; }
  .crab-h5 .discover-view .shore { grid-column: 2; grid-row: 1; height: 174px; min-height: 174px; border-radius: 0 18px 18px 0; background: var(--sky-top); box-shadow: none; }
  .crab-h5 .discover-view .shore::before,
  .crab-h5 .discover-view .seaclip, .crab-h5 .discover-view .foam,
  .crab-h5 .discover-view .boat { display: none; }
  .crab-h5 .discover-view .searchwrap { left: 14px; right: 26px; top: auto; bottom: 24px; }
  .crab-h5 .discover-view .search { height: 48px; border-width: 1.5px; border-radius: 12px; box-shadow: 2px 3px 0 var(--ink); }
  .crab-h5 .discover-view .search input { font-size: 14px; }
  .crab-h5 .discover-view .mascot { right: 9px; bottom: 39px; width: 102px; height: 82px; }
  .crab-h5 .discover-view .bubble { right: 104px; bottom: 68px; max-width: 170px; }
  .crab-h5 .discover-view .sand { grid-column: 1 / -1; width: 100%; max-width: none; padding: 22px 0 0; background: none; }
  .crab-h5 .discover-view .sand::before { display: none; }
  .crab-h5 .discover-view .tabs { display: flex; justify-content: flex-start; align-items: center; gap: 10px; max-width: none; margin: 0 0 24px; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
  .crab-h5 .tabs .channel-shore, .crab-h5 .tabs .channel-crab { display: none; }
  .crab-h5 .tabs .tab { flex: none; flex-direction: row; justify-content: center; gap: 8px; min-height: 46px; padding: 5px 16px 5px 10px; border: 1px solid transparent; border-radius: 10px; }
  .crab-h5 .tabs .tab.on { border-color: #D8BC70; background: #FFF0BC; }
  .crab-h5 .tabs .tab:hover { background: #F7F1E5; }
  .crab-h5 .tabs .channel-art { width: 34px; height: 32px; transform: none; }
  .crab-h5 .tabs .channel-item { width: 34px; height: 32px; opacity: 1; transform: none; }
  .crab-h5 .tabs .channel-label { min-width: 0; font-size: 14px; }
  .crab-h5 .tabs .channel-label::after { display: none; }
  .crab-h5 .crab-grid { gap: 20px; }
  .crab-h5 .feed-column { gap: 22px; }
  .crab-h5 .crab-card { border: 1px solid #DDD8CD; border-radius: 13px; background: var(--surface); box-shadow: none; }
  .crab-h5 .card-visual { overflow: hidden; border-radius: 12px 12px 0 0; }
  .crab-h5 .card-photo { border-radius: inherit; }
  .crab-h5 .card-copy { padding: 12px 12px 3px; }
  .crab-h5 .card-copy h3 { font-size: 16px; line-height: 1.6; }
  .crab-h5 .by { padding: 2px 12px 8px; }
  .crab-h5 .by .author { font-size: 12px; }
  .crab-h5 .crab-card .like { min-height: 44px; min-width: 44px; font-size: 12px; }
  /* Activities retain room for dates, places and real attendance. */
  .crab-h5 .mobile-app.scene-weekend > .mobile-scroll { max-width: 1120px; padding: 24px var(--desktop-gutter) 40px; }
  .crab-h5 .desktop-page-title { display: block; margin: 0; color: var(--ink); font: 900 28px/1.4 var(--sans); letter-spacing: -.6px; }
  .crab-h5 .scene-weekend-head { height: auto; min-height: 112px; margin: 0 0 20px; padding: 24px 320px 24px 0; border: 0; background: none; overflow: visible; }
  .crab-h5 .scene-weekend-head::before { left: auto; right: 0; width: 280px; border-radius: 16px; }
  .crab-h5 .scene-weekend-track { left: auto; right: 12px; bottom: 6px; width: 256px; }
  .crab-h5 .scene-weekend .event-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 24px; }
  .crab-h5 .scene-weekend .event-list > :is(.empty-view,.state-banner) { grid-column: 1 / -1; }
  /* Identity lives beside the member's content, instead of above a long feed. */
  .crab-h5 .profile-social > .profile-scroll { display: grid; grid-template-columns: 292px minmax(0,1fr); grid-template-rows: auto auto 1fr; align-content: start; align-items: start; gap: 0 30px; max-width: 1200px; padding: 32px var(--desktop-gutter) 40px; background: var(--surface); }
  .crab-h5 .profile-cove { grid-column: 1; grid-row: 1; width: 100%; min-height: 330px; padding: 14px 22px 76px; border-radius: 18px 18px 0 0; }
  .crab-h5 .profile-identity { grid-template-columns: 1fr; gap: 8px; margin-top: 8px; }
  .crab-h5 .profile-identity .profile-avatar-frame { width: 88px; height: 88px; }
  .crab-h5 .profile-identity .social-profile-avatar { width: 80px; height: 80px; }
  .crab-h5 .profile-cove-copy { padding: 8px 0 4px; }
  .crab-h5 .profile-cove-copy h1 { font-size: 23px; }
  .crab-h5 .profile-cove .profile-bio { font-size: 13px; line-height: 1.7; }
  .crab-h5 .profile-cove .profile-seabed,
  .crab-h5 .profile-cove.profile-roomy-copy .profile-seabed { margin-top: 18px; }
  .crab-h5 .profile-cove > .profile-cove-crab { right: 12px; width: 100px; }
  .crab-h5 .profile-social .profile-treasure-strip { grid-column: 1; grid-row: 2; width: 100%; margin: 0; padding: 12px 8px; border: 1px solid #E3D9C5; border-top: 0; border-radius: 0 0 16px 16px; background: #FFF9EF; box-shadow: none; }
  .crab-h5 .profile-social .profile-treasure-strip button { flex-direction: column; gap: 1px; }
  .crab-h5 .profile-social .profile-treasure-strip strong { font-size: 20px; }
  .crab-h5 .profile-social .profile-treasure-strip :is(button > span,div > span) { font-size: 12px; }
  .crab-h5 .profile-social .profile-shortcuts { grid-column: 1; grid-row: 3; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; width: 100%; margin: 20px 0 0; padding: 0; }
  .crab-h5 .profile-shortcuts button { flex-direction: row; justify-content: flex-start; gap: 9px; min-height: 62px; padding: 10px 12px; color: var(--ink); border: 1px solid #DDD4C3; border-radius: 10px; background: #FFF9EF; }
  .crab-h5 .profile-content { grid-column: 2; grid-row: 1 / 4; width: 100%; min-width: 0; min-height: 400px; background: var(--surface); }
  .crab-h5 .profile-tabs { grid-template-columns: repeat(2,minmax(0,max-content)); gap: 28px; min-height: 54px; padding: 0 8px; background: var(--surface); }
  .crab-h5 .profile-tabs button { min-height: 54px; padding: 6px 16px 12px; font-size: 16px; }
  .crab-h5 .profile-panel { padding: 24px 0; }
  .crab-h5 .profile-panel .crab-grid { gap: 18px; }
  .crab-h5 .profile-panel .card-copy h3 { font-size: 15px; }
  .crab-h5 .profile-simple-surface { grid-column: 1; grid-row: 1 / 4; width: 100%; padding: 0 0 22px; border-radius: 18px; }
  .crab-h5 .profile-theme-simple .profile-cove { min-height: 282px; padding: 14px 22px 16px; }
  .crab-h5 .profile-theme-simple .profile-shortcuts { width: auto; margin-inline: 16px; }
  .crab-h5 .profile-theme-simple .profile-treasure-strip { border: 0; background: none; }
  .crab-h5 .member-social-actions { grid-column: 1; grid-row: 3; padding: 20px 0; }
  .crab-h5 .member-view .social-post-grid { padding: 24px 0; gap: 20px; }
  .crab-h5 .member-content-header { margin-inline: 0; }
  .crab-h5 .profile-overlay { left: var(--desktop-rail); width: calc(100% - var(--desktop-rail)); margin: 0; }
  .crab-h5 .profile-menu-overlay .profile-overlay-sheet { width: 350px; max-width: 90%; }
  /* The photo and reading column have independent, deliberate proportions. */
  .crab-h5 .post-topbar { padding: 16px var(--desktop-gutter); min-height: 80px; border-bottom: 1px solid var(--line); background: var(--surface); }
  .crab-h5 .post-detail > .post-scroll { max-width: 1200px; padding: 32px var(--desktop-gutter) 40px; }
  .crab-h5 .post-article { width: 100%; max-width: 720px; margin-inline: auto; }
  .crab-h5 .post-scroll:has(.post-gallery) { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); grid-template-rows: max-content 1fr; align-content: start; align-items: start; column-gap: 32px; }
  .crab-h5 .post-article:has(.post-gallery) { display: contents; }
  .crab-h5 .post-article:has(.post-gallery) > .post-copy { grid-column: 2; grid-row: 1; }
  .crab-h5 .post-gallery { position: sticky; top: 0; width: 100%; margin: 0; border-radius: 14px; overflow: hidden; background: #F0EFEA; }
  .crab-h5 .post-article > .post-gallery { grid-column: 1; grid-row: 1 / 3; }
  .crab-h5 .post-detail .detail-hero { max-height: calc(100dvh - 245px); min-height: 280px; object-fit: contain; }
  .crab-h5 .post-copy { min-width: 0; padding: 0; }
  .crab-h5 .post-detail .detail-title { margin-top: 0; font-size: 26px; line-height: 1.5; }
  .crab-h5 .post-detail .detail-body { font-size: 16px; line-height: 1.9; }
  .crab-h5 .post-comments { max-width: 720px; margin: 30px auto 0; padding: 24px 0; }
  .crab-h5 .post-scroll:has(.post-gallery) .post-comments { grid-column: 2; grid-row: 2; width: 100%; margin: 22px 0 0; }
  .crab-h5 .post-composer { width: 100%; margin: 0; padding: 14px max(var(--desktop-gutter),calc((100% - 1136px)/2)); border-top: 1px solid var(--line); background: #FCF8EF; }
  /* Messages use a compact illustrated margin beside a calm, wide inbox. */
  .crab-h5 .scene-postoffice > .mobile-scroll { max-width: 1120px; padding: 32px var(--desktop-gutter) 40px; }
  .crab-h5 .message-center:not(.is-folder) { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 24px; align-items: center; }
  .crab-h5 .message-center > .desktop-page-title { grid-column: 1; grid-row: 1; }
  .crab-h5 .message-drift-scene { grid-column: 2; grid-row: 1; min-height: 116px; height: 116px; margin: 0; padding: 0; border-radius: 16px; }
  .crab-h5 .message-delivery-art { min-height: 116px; margin: 0; }
  .crab-h5 .message-inbox-content { grid-column: 1 / -1; min-width: 0; padding: 0; }
  .crab-h5 .message-overview-toolbar { margin-bottom: 18px; }
  .crab-h5 .message-thread { min-height: 88px; }
  .crab-h5 .chat-view > .chat-header { width: 100%; max-width: none; margin: 0; padding: 16px var(--desktop-gutter); background: var(--surface); }
  .crab-h5 .chat-view > .mobile-scroll { max-width: 900px; margin-bottom: 0; padding: 30px 40px; }
  .crab-h5 .chat-message { max-width: min(72%,480px); }
  .crab-h5 .event-group-announcement { padding:0 max(32px,calc((100% - 820px)/2)); }
  .crab-h5 .event-announcement-dialog { inset:0; max-height:min(760px,calc(100dvh - 64px)); margin:auto; border:1px solid #D3CCBC; border-radius:22px; }
  .crab-h5 .event-group-view .chat-message { max-width: min(calc(100% - 52px),480px); }
  .crab-h5 .chat-view .chat-compose { position: relative; inset: auto; width: 100%; margin: 0; padding: 16px max(32px,calc((100% - 820px)/2)) max(16px,env(safe-area-inset-bottom)); background: #FCF8EF; }
  .crab-h5 .event-detail-view > .event-detail-scroll { max-width: 1120px; padding: 20px var(--desktop-gutter) 40px; }
  .crab-h5 .event-invitation { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(240px,1fr); column-gap: 40px; align-items: start; }
  .crab-h5 .event-detail-hero { grid-column: 1 / -1; }
  .crab-h5 .event-detail-topbar.mobile-header { padding-top: 0; min-height: 64px; }
  .crab-h5 .event-overview { grid-column: 1 / -1; padding: 22px 0 28px; }
  .crab-h5 .event-detail-view .event-detail-title { max-width: 880px; font-size: 36px; }
  .crab-h5 .event-facts { flex-direction: row; flex-wrap: wrap; gap: 12px 28px; }
  .crab-h5 .event-ticket-photo { grid-column: 1; margin: 22px 0 28px; }
  .crab-h5 .event-invitation.has-photo > .event-overview { grid-column: 2; border-bottom: 0; }
  .crab-h5 .event-invitation.has-photo .event-detail-title { font-size: 28px; }
  .crab-h5 .event-invitation.has-photo .event-facts { flex-direction: column; }
  .crab-h5 .event-detail-view .event-ticket-photo .event-detail-thumb { max-height: min(60dvh,680px); }
  .crab-h5 .event-about { grid-column: 1; padding-top: 28px; }
  .crab-h5 .event-details-content { grid-column: 2; margin-top: 28px; padding-left: 24px; border-left: 1px solid #DFD7C9; }
  .crab-h5 .event-invitation:has(> .event-details-content:not(.has-actions)) .event-about { grid-column: 1 / -1; max-width: 740px; }
  .crab-h5 .event-details-content:not(.has-actions) { grid-column: 1 / -1; max-width: 740px; margin-top: 0; padding-left: 0; border-left: 0; }
  .crab-h5 .event-personal-actions { padding-top: 0; border-top: 0; gap: 4px 14px; }
  .crab-h5 .event-action-bar { position: relative; inset: auto; padding-inline: max(32px,calc((100% - 1032px)/2)); border-top: 1px solid var(--line); }
  .crab-h5 .event-action-bar .event-main-action { flex: 0 1 320px; margin-left: auto; }
  .crab-h5 .toast { left: calc(50% + var(--desktop-rail)/2); max-width: 560px; }
}
@media (min-width: 1200px) {
  .crab-h5 { --desktop-rail: 216px; --desktop-gutter: 44px; }
  .crab-h5 .nav.crab-nav { padding-inline: 22px; }
  .crab-h5 .nav.crab-nav > button { font-size: 16px; }
  .crab-h5 .discover-view h1.headline { font-size: 30px; }
  .crab-h5 .profile-social > .profile-scroll { grid-template-columns: 310px minmax(0,1fr); gap: 0 36px; }
}

/* The same group directory becomes a bounded dialog on a roomy canvas. */
@media(min-width:768px) {
  .crab-h5 .event-members-layer { align-items:center; padding:24px; }
  .crab-h5 .event-members-layer .event-participants-sheet { max-width:560px; max-height:calc(100% - 48px); padding:0 28px 24px; border-bottom:1px solid #E0DBD1; border-radius:24px; }
  .crab-h5 .event-members-grid ul { grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px 16px; }
}

@media(min-width:960px) {
  .crab-h5 .message-folder-view > .mobile-scroll { max-width:880px; padding:24px var(--desktop-gutter) 40px; }
  .crab-h5 .message-folder-view .message-letter { padding-block:22px; }
}