/* =====================================================================
   Desktop layer (loaded after app.css). Below 1200px the phone and tablet
   layouts apply; from 1200px the app is laid out for a real screen: larger
   type and targets, wider pages, landscape media in the feed, and split
   layouts where a single column would leave most of the screen empty.
   ===================================================================== */
.set-nav{display:none}
.desk-split{display:flex;flex-direction:column;gap:14px}
.desk-split__side>*:first-child{margin-top:10px}

@media (min-width:1200px){
  :root{--fs-2xs:12px;--fs-xs:13px;--fs-sm:14px;--fs-md:15px;--fs-base:16px;--fs-lg:18px;--fs-xl:23px;--fs-2xl:30px;--fs-3xl:40px;--side-w:272px}
  body{line-height:1.55}
  .view{padding:44px 56px 96px}
  .page--narrow{max-width:840px}
  .page--mid{max-width:1140px}
  .page--wide{max-width:1380px}
  .page--feed{max-width:1260px;grid-template-columns:minmax(0,760px) 380px;gap:52px}
  .rail{top:44px;gap:22px}

  .side{padding:28px 18px 20px}
  .side__logo{margin-bottom:24px}
  .side__logo svg{height:34px}
  .nav a,.nav button:not(.nav__create){height:52px;font-size:16px;gap:16px}
  .nav .nav__create{height:52px;font-size:16px}

  .page-head{margin-bottom:30px;min-height:52px}
  .page-head h1{font-size:36px;letter-spacing:-.025em}
  .section-head{margin-bottom:18px}
  .section-head h2{font-size:24px}
  .group-label{font-size:13px;margin:32px 4px 12px}
  .btn{height:50px;padding:0 26px}
  .btn-s{height:42px;padding:0 18px;font-size:15px}
  .btn-xs{height:36px;padding:0 14px;font-size:13px}
  .btn-l{height:58px}
  .icon-btn{width:46px;height:46px}
  .chip{height:42px;padding:0 18px;font-size:15px}
  .seg button{height:44px;font-size:15px}
  .input,.select,.textarea{min-height:52px;font-size:16px}
  .card-pad{padding:26px}
  .card-pad-l{padding:34px}
  .list-row{min-height:72px;padding:14px 22px;gap:16px}
  .list-row .ico-box{width:44px;height:44px}
  .stat{padding:20px}
  .stat b{font-size:32px}
  .empty{padding:72px 24px}

  /* feed: landscape media so one post doesn't fill the whole screen */
  .post{border-radius:var(--r-2xl)}
  .post__head{padding:20px 18px 14px 22px}
  [dir="rtl"] .post__head{padding:20px 22px 14px 18px}
  .post__text{padding:0 22px 18px;font-size:17px;line-height:1.55}
  .post__media .poster{aspect-ratio:16/10}
  .post__actions{padding:8px 12px}
  .act{height:44px;font-size:15px}
  .ev-attach{margin:0 22px 18px;width:calc(100% - 44px);padding:12px}
  .ev-attach .poster{width:72px}
  .event-block .poster{aspect-ratio:2/1}
  .event-block__body{padding:18px 22px 22px}
  .feed>*+*{margin-top:24px}
  .stories{gap:18px;padding-bottom:22px}
  .story{width:92px;font-size:13px}
  .story .av-l{--av:72px}
  .post__label{padding:16px 22px 0}
  .poll{padding:0 22px 18px}

  /* discovery */
  .ev-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:34px 24px}
  .ev-tile__title{font-size:17px}
  .rail-x{grid-auto-columns:272px;gap:22px}
  .hero-slide{min-height:480px}
  .hero-slide__body{padding:56px 56px 64px;gap:18px}
  .hero-slide__body h2{font-size:52px}
  .hero-carousel__dots{inset-inline-start:56px;bottom:26px}

  /* event page */
  .ev-hero{grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:64px}
  .ev-hero__poster{top:44px}
  .ev-title{font-size:54px}
  .tier{padding:20px 22px}
  .fact{padding:12px 0}
  .fact .ico-box{width:48px;height:48px}

  /* tickets: list beside a side panel */
  .desk-split{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"main top" "main side";gap:18px 44px;align-items:start}
  .desk-split__top{grid-area:top}
  .desk-split__main{grid-area:main}
  .desk-split__side{grid-area:side}
  .desk-split__side>*:first-child{margin-top:0}
  .ticket{grid-template-columns:200px 1fr}
  .ticket .poster{min-height:180px}
  .ticket__body{padding:20px 24px}

  /* invitations: two up */
  .inv-page .inv-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(500px,1fr));gap:22px;align-items:start}
  .inv-page .inv-list>*{margin:0 !important}

  /* settings: index in two columns; sub-pages beside a menu */
  .set-index{columns:2;column-gap:28px}
  .set-sec{break-inside:avoid;display:inline-block;width:100%}
  .set-sec .group-label{margin-top:8px}
  .set-index-page .set-signout{max-width:420px;margin-inline:auto;display:flex}
  .set-shell{display:grid;grid-template-columns:290px minmax(0,1fr);gap:44px;align-items:start}
  .set-main{max-width:860px;min-width:0}
  .set-nav{display:flex;flex-direction:column;gap:2px;padding:10px;position:sticky;top:44px}
  .set-nav a{display:flex;align-items:center;gap:12px;height:48px;padding:0 14px;border-radius:var(--r-m);font-weight:700;color:var(--text-2)}
  .set-nav a:hover{background:var(--surface-2);color:var(--text)}
  .set-nav a[aria-current="page"]{background:var(--surface-2);color:var(--text);box-shadow:inset 3px 0 0 var(--accent-text)}
  [dir="rtl"] .set-nav a[aria-current="page"]{box-shadow:inset -3px 0 0 var(--accent-text)}
  .set-nav .set-nav__all{color:var(--text-3);font-size:14px;border-bottom:1px solid var(--line);border-radius:var(--r-m) var(--r-m) 0 0;margin-bottom:6px}

  /* messages fill the screen */
  .inbox{grid-template-columns:380px minmax(0,1fr);height:calc(100dvh - 140px);border-radius:var(--r-2xl)}
  .bubble{font-size:16px;padding:12px 16px}
  .convo{padding:14px 18px}

  .profile-head{gap:36px}
  .post-grid{gap:10px}
  .auth__box{width:min(440px,100%)}
}

@media (min-width:1680px){
  .page--feed{max-width:1340px;grid-template-columns:minmax(0,800px) 400px;gap:64px}
  .page--wide{max-width:1480px}
  .page--mid{max-width:1200px}
  .view{padding-inline:72px}
  .ev-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
}