@media (max-width:1150px){
  .app{grid-template-columns:180px minmax(0,1fr)}
  .main,.calendar{min-width:0}
  .calendar{overflow-x:auto}
  .week,.month-grid{min-width:770px}
  .detail{max-width:100vw}
}
@media (min-width:761px) and (max-width:1150px){
  .topbar{height:auto;min-height:75px;padding:12px 18px;gap:12px;flex-wrap:wrap}
  .actions{min-width:0;flex-wrap:wrap}
  .calendar{padding:20px 16px}
  .weeknav{margin-left:auto}
  .detail{width:min(420px,75vw)}
}
@media (max-width:760px){
  .app{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .topbar{height:auto;min-height:72px;padding:12px 14px;gap:10px;flex-wrap:wrap}
  .title{flex:1}
  .actions{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .actions select{min-width:0;width:100%;max-width:none!important;font-size:14px!important}
  .actions .btn.dark{min-height:44px}
  .calendar{padding:16px 12px;overflow-x:visible}
  .calhead{margin:0 0 14px;gap:12px}
  .calhead h2{grid-column:1/-1}
  .view-switch{grid-column:1/-1;grid-row:auto;width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .view-switch button{min-height:42px;font-size:13px}
  .weeknav{grid-column:1/-1;grid-row:auto;display:grid;grid-template-columns:44px minmax(0,1fr) 44px auto;gap:5px}
  .weeknav button{width:44px;height:44px}
  .weeknav span{min-width:0;font-size:12px}
  .weeknav .today-button{width:auto;padding:0 9px}
  .status-legend{gap:7px 11px}
  .week,.month-grid{width:100%;min-width:680px}
  .calendar:has(.week),.calendar:has(.month-grid){overflow-x:auto}
  .list-view{min-width:0;overflow:visible}
  .list-date span{font-size:11px}
  .list-items .compact-post{min-height:44px}
  .list-items .compact-post p{font-size:11px}
  .list-add{width:36px;height:36px}
  .detail{position:fixed;inset:0 0 0 auto;width:min(440px,100%);max-width:100%;height:100dvh;z-index:6;padding:20px 16px calc(24px + env(safe-area-inset-bottom));overscroll-behavior:contain}
  .detailhead{position:sticky;top:-20px;background:#fafbfb;z-index:2;padding:12px 0}
  .detailhead .close{min-width:44px;min-height:44px;font-size:26px}
  .field input,.field textarea,.field select{font-size:16px;min-height:44px}
  .mobilebar{height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);z-index:5}
  .mobilebar button{min-width:64px;min-height:50px;font-size:11px}
  .mobilebar span{font-size:22px}
  .overlay{padding:12px;z-index:8}
  .dialog{max-height:calc(100dvh - 24px);overflow:auto}
  .review{margin:12px;max-width:none}
  .reviewbody{padding:16px}
  .reviewactions,.detailbuttons{flex-wrap:wrap}
  .reviewactions button,.detailbuttons button{min-height:44px;min-width:0}
}

/* The media stage is sized by the publishing format on every screen. */
.social-frame{width:100%;max-width:360px;margin-inline:auto;background:#fff}
.feed-stage,.facebook-frame .feed-stage{height:auto;aspect-ratio:3 / 4;position:relative;overflow:hidden}
.facebook-frame .feed-stage{aspect-ratio:4 / 5}
.reel-stage,.story-stage{width:100%;height:auto;max-height:none!important;aspect-ratio:9 / 16;position:relative;overflow:hidden}
.feed-stage>img,.feed-stage>video,.reel-stage>img,.reel-stage>video,.story-stage>img,.story-stage>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feed-stage .mock-art,.reel-stage .mock-art,.story-stage .mock-art{position:absolute;inset:0;width:100%;height:100%}
.social-frame .profile-pic,.social-frame .story-avatar{flex:none;background:#aeb4b8;border:2px solid #fff;box-shadow:0 0 0 1px #929a9f}
.feed-frame:not(.facebook-frame){border:1px solid #dbdbdb;border-radius:4px;box-shadow:0 2px 12px #0000000b}
.feed-frame:not(.facebook-frame) .feed-head{height:52px;padding:8px 12px;gap:10px;color:#171717}
.feed-frame:not(.facebook-frame) .feed-head div{font-size:12px;line-height:1.2}
.feed-frame:not(.facebook-frame) .feed-head small{color:#737373;font-size:10px}
.feed-frame:not(.facebook-frame) .feed-head button{font-size:17px;color:#222}
.feed-frame:not(.facebook-frame) .feed-actions{padding:10px 12px 3px;align-items:center}
.feed-frame:not(.facebook-frame) .feed-actions span:first-child{font-size:24px;letter-spacing:1px;line-height:1}
.feed-frame:not(.facebook-frame) .feed-actions span:last-child{font-size:23px;line-height:1}
.feed-frame:not(.facebook-frame) .feed-meta{font-size:11px;padding:2px 12px 13px;color:#1c1c1c}
.feed-frame:not(.facebook-frame) .feed-meta small{font-size:10px;color:#737373}
.feed-frame:not(.facebook-frame) .carousel-dots{height:9px;padding-top:3px}
.feed-frame:not(.facebook-frame) .carousel-dots i{width:4px;height:4px}
.feed-frame:not(.facebook-frame) .slide-count{font-size:10px;background:#161616b8;padding:5px 8px}
.reel-frame,.story-frame{border-radius:5px}
.story-frame .story-stage{border-radius:5px}
@media (max-width:760px){.social-frame{max-width:min(360px,100%)}}