/* Orbit v1.5 reference-locked desktop composition. Screenshot-derived art ONLY in decorative/marketing areas.
   Every feed card, navigation item, profile and social feature stays real DOM with working behavior. */
@media(min-width:1321px){
 :root{--bg:#06090e;--card:#0c1118;--card2:#111721;--stroke:#243040;--muted:#acb7cc;--accent:#f2ce79;--purple:#205ce1;--gold:#f2cb74}
 html{scrollbar-color:#283548 #06090e}
 body{font-family:Inter,'Segoe UI',Arial,sans-serif;background:#06090d;color:#f8f8fb;font-size:13px;position:relative}
 body::before{position:fixed;content:'';z-index:0;left:0;top:65px;bottom:0;width:69px;background:url('/static/reference-left.webp') center top /100% 100% no-repeat;pointer-events:none}
 body::after{position:fixed;content:'';z-index:0;right:0;top:65px;bottom:0;width:59px;background:url('/static/reference-right.webp') center top /100% 100% no-repeat;pointer-events:none;-webkit-text-stroke:0;writing-mode:initial;letter-spacing:normal}
 #app{position:relative;z-index:1}
 .topbar{height:65px;background:#070a0eed;border-bottom:1px solid #1d2735;box-shadow:none}
 .topbar-inner{max-width:1500px;height:65px;padding:0 40px;gap:28px}
 .brand{font-size:30px;font-weight:850;letter-spacing:-1.4px;width:267px;gap:10px}
 .brand-mark{width:35px;height:35px;border-color:#edc66a;border-width:3px;box-shadow:0 0 0 1px #264f9f}
 .brand-mark:after{background:#1c5dcb;border-color:#c0d4ff}
 .brand-dot{background:#cfd9ff}
 .top-search{width:500px;height:42px;border-radius:12px;background:linear-gradient(130deg,#10151f,#151a24);border:1px solid #293345}
 .top-search input{font-size:13px}
 .top-actions{gap:20px;margin-left:auto;margin-right:9px}
 .top-create{min-width:149px;background:linear-gradient(150deg,#2e80ff,#1042b5);border:1px solid #77aaff;box-shadow:inset 0 1px #ffffff47,0 0 13px #2048b963;border-radius:11px;height:45px;padding:0 22px;font-weight:750}
 .header-avatar{height:47px;width:47px;background:#07142b;border:2px solid #f5d16d;box-shadow:0 0 0 2px #1f54a6}
 .shell{max-width:1500px;width:100%;margin:0 auto;padding:0 16px;display:grid;grid-template-columns:250px minmax(0,740px) minmax(0,400px);gap:30px;justify-content:start;align-items:start}
 .sidebar{position:sticky;top:65px;height:calc(100vh - 65px);overflow:auto;background:#070a0f;border-right:1px solid #182337}
 .sidebar-content{padding:25px 15px 18px 10px}
 .nav-section-label{font-size:10px;font-weight:800;letter-spacing:2.1px;color:#c4cbd8;margin:0 0 10px 16px}
 .main-nav{display:flex;flex-direction:column;gap:0}
 .nav-item{font-size:13px;line-height:1.3;height:40px;min-height:40px;margin:0;border-radius:9px;padding:8px 13px;gap:13px;color:#e0e5ee;font-weight:650}
 .nav-item svg{width:20px;height:20px}
 .nav-item.active{background:linear-gradient(100deg,#111e35,#1c4ec0 98%);border:1px solid #4484ff;box-shadow:inset 0 1px #ffffff21;color:#fff}
 .sidebar-divider{margin:10px 0 9px 0;background:#263447}
 .community-heading .nav-section-label{margin:0 0 10px 16px}
 .subtle-plus{color:#d7dce6}
 .sidebar-communities{gap:0;margin-left:9px}
 .sidebar-community{height:39px;padding:5px 4px;gap:10px;font-size:12px;font-weight:670;color:#dce3ed}
 .sidebar-community .community-mini-icon{width:32px;height:32px}
 .social-toggle{display:none!important;margin-top:1px;color:#879bb8;opacity:.9;font-size:10px;height:26px;min-height:26px;padding-left:14px}
 .social-toggle svg{width:13px;height:13px}
 #social-shortcuts:not([hidden]){padding:4px 0 3px 12px;border-left:1px solid #2d4775;margin-left:19px}
 #social-shortcuts .nav-item{min-height:30px;height:32px;font-size:11px}
 .sidebar-spacer{display:none!important}.invite-card{position:relative;isolation:isolate;width:231px;height:150px;min-height:150px;border:0;margin:12px 0 10px 0;padding:0;border-radius:12px;background:transparent url('/static/reference-invite.webp') center /100% 100% no-repeat;box-shadow:none;overflow:hidden}
 .invite-card::after,.invite-card::before{display:none}
 .invite-card>*{opacity:0;pointer-events:none}
 .invite-card button{pointer-events:auto;position:absolute;opacity:0;top:101px;left:14px;width:202px;height:39px;padding:0;border:0;z-index:3}
 .invite-card button:focus-visible{opacity:1;outline:2px solid white;outline-offset:-3px}
 .sidebar-footer{font-size:10px;color:#8593a8}
 .main-content{padding:0 0 90px;position:relative;min-width:0}
 .main-content[data-route="home"]::before,.main-content[data-route="popular"]::before,.main-content[data-route="following"]::before,.main-content[data-route="bookmarks"]::before{content:'';position:absolute;top:0;right:0;width:407px;height:146px;pointer-events:none;background:url('/static/reference-header.webp') right top/407px 146px no-repeat;z-index:0}
 .main-content[data-route="home"] .page-heading,.main-content[data-route="popular"] .page-heading,.main-content[data-route="following"] .page-heading,.main-content[data-route="bookmarks"] .page-heading{background:none!important;padding:20px 0 0!important;min-height:95px!important;height:95px!important;position:relative;z-index:1}
 .main-content[data-route="home"] .page-heading::after,.main-content[data-route="popular"] .page-heading::after,.main-content[data-route="following"] .page-heading::after,.main-content[data-route="bookmarks"] .page-heading::after{display:none!important}
 .page-eyebrow{font-size:10px;letter-spacing:2px;font-weight:850;color:#f2ca70}
 .page-heading h1{font:800 30px/1.1 Inter,'Segoe UI',Arial,sans-serif;margin:5px 0 4px;letter-spacing:-.9px}
 .page-heading p{font-size:13px;color:#b4c0d0;margin-bottom:0}
 .feed-tabs{margin:0 0 12px;border-color:#263348;gap:13px;position:relative;z-index:1}
 .feed-tabs .tab{font-size:13px;font-weight:700;padding:12px 15px 11px;min-width:73px}
 .feed-tabs .tab.active{color:#f7cf79;border-bottom:2px solid #f5d478}
 .post-composer{padding:13px 13px 10px;margin-bottom:8px;background:#0c1017;border:1px solid #293244;border-radius:13px;min-height:110px;box-shadow:inset 0 1px #ffffff08}
 .post-composer .avatar{height:45px;width:45px;flex:0 0 45px;border:2px solid #f0c65d;box-shadow:0 0 0 2px #1c5299;background:#071c4e!important}
 .compose-head{gap:13px}
 .compose-prompt{height:40px;color:#b2c0d2;background:#151b25;border-radius:11px;border:1px solid #242d3b;text-align:left}
 .compose-bottom{margin:4px 0 0!important;padding-left:57px;padding-top:3px}
 .compose-options{gap:20px}
 .compose-option{font-size:12px;color:#d1d9e5}
 .compose-option svg{width:20px;height:20px}
 .post-composer .primary-button{background:linear-gradient(135deg,#ffe69b,#dfb55e);color:#101215;border:1px solid #ffdf82;border-radius:9px;font-weight:850;height:35px;min-width:111px;padding:7px 12px;box-shadow:none}
 .post-card{border-radius:13px;border:1px solid #252e3d;background:linear-gradient(120deg,#10151d,#0b1016);padding:12px 15px 9px;margin-bottom:7px;box-shadow:inset 0 1px #ffffff07}
 .post-top{gap:10px}
 .post-top .avatar{width:42px;height:42px;flex:0 0 42px;box-shadow:none}
 .post-meta{line-height:1.25}
 .author-name{font-weight:850;font-size:12px}
 .handle,.time,.meta-second{font-size:10px;color:#a6afc4}
 .meta-second{margin-top:2px}
 .community-pill{font-size:10px;background:#142958;border-color:#3068c6;color:#d5e3ff;padding:3px 8px}
 .post-title{font-size:15px;font-weight:800;letter-spacing:-.25px;line-height:1.25;margin:7px 0 5px}
 .post-body{font-size:12px;line-height:1.35;color:#c5cfdb}
 .post-actions{border:0;margin-top:6px;padding-top:0;gap:19px}
 .post-actions .action{font-size:11px;gap:6px;padding:2px 0;color:#c8d4e7}
 .post-actions .action svg{width:17px;height:17px}
 .post-actions .action.like.engaged{color:#edca77}
 .post-more{font-size:15px}
 .rightbar{position:sticky;top:65px;max-height:none;overflow:visible;padding:15px 0 20px}
 .right-welcome{position:relative;width:408px;max-width:none;margin-left:22px;height:242px;min-height:242px;border:0!important;border-radius:13px;padding:0!important;background:transparent url('/static/reference-welcome.webp') center/100% 100% no-repeat;box-shadow:none!important;overflow:hidden}
 .right-welcome::before,.right-welcome::after{display:none!important}
 .right-welcome>*{opacity:0;pointer-events:none}
 .right-welcome button{opacity:0;pointer-events:auto;position:absolute;left:11px;top:172px;width:214px;height:41px;padding:0;z-index:1}
 .right-welcome button:focus-visible{opacity:1;outline:3px solid white;outline-offset:-3px}
 .widget{margin-top:14px;padding:10px 0 8px;border-top:1px solid #283449;border-bottom:0}
 .widget-heading{margin-bottom:9px}
 .widget-heading h3{font-size:14px;font-weight:750}
 .widget .text-link{font-size:11px;color:#70aeff}
 .right-com-row{padding:6px 3px;min-height:53px;gap:12px}
 .right-com-row .community-mini-icon{height:40px;width:40px;border:1px solid #26374c;border-radius:10px;background:#121b2c;font-size:23px}
 .right-com-row strong{font-size:12px;font-weight:780;color:#f1f5fc}
 .right-com-row small{font-size:11px;color:#9aa8ba}
 .right-com-row .row-arrow{margin-left:auto;color:#d4dde7;font-size:17px}
 .guideline-widget{width:430px;max-width:none;height:142px;min-height:142px;background:url('/static/reference-guidelines.webp') left top/100% 142px no-repeat;border:0;padding:0;margin-top:4px;overflow:hidden;border-radius:12px;position:relative;transition:box-shadow .15s ease}
 .guideline-widget .widget-heading{opacity:0;pointer-events:none}
 .guideline-widget .guideline-link{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0!important;border:0!important;background:transparent!important;z-index:2;cursor:pointer}
 .guideline-widget .guideline-link>*{opacity:0;pointer-events:none}
 .guideline-widget .guideline-link::after{display:none}
 .guideline-widget:hover{box-shadow:0 0 0 1px #e8c77b,0 0 22px #a47c2d2c}
 .guideline-widget:has(.guideline-link:focus-visible){outline:2px solid #f8d68b;outline-offset:3px}
 .guideline-widget .guideline-link:focus-visible{outline:0}
}
/* Intentionally no mobile restyling in this desktop reference build. */

@media(min-width:741px) and (max-width:1320px){
  :root{--bg:#06090e;--card:#0c1118;--card2:#111721;--stroke:#243040;--accent:#f2ce79;--purple:#205ce1}
  .topbar{background:#070a0e;border-color:#202c3b}
  .brand{font-family:Inter,'Segoe UI',Arial,sans-serif;font-weight:850}
  .main-nav .nav-item.active{background:linear-gradient(90deg,#121e38,#1c4fc0);border:1px solid #3c7eff}
  .top-create{background:linear-gradient(140deg,#2675f4,#1445bc);border:1px solid #74a7fc}
  .shell{grid-template-columns:220px minmax(0,1fr);max-width:1100px;gap:20px;padding:0 18px}
  .main-content{min-width:0}
  .rightbar{display:none!important}
  .social-toggle{display:none!important}
  .sidebar-spacer{display:none!important}
  .post-card{background:#0b1017;border:1px solid #253243}
  .post-composer{background:#0c1118}
  .post-composer .primary-button,.invite-card button{background:linear-gradient(115deg,#ffe89b,#dfb562);color:#131820}
}

/* Dismiss controls float over decorative reference artwork without altering its composition. */
@media(min-width:1321px){
  .invite-card>button.dismiss-panel,
  .right-welcome>button.dismiss-panel,
  .guideline-widget>button.dismiss-panel{
    position:absolute;z-index:12;
    top:8px;right:8px;bottom:auto;left:auto;
    display:flex;align-items:center;justify-content:center;
    width:27px;height:27px;min-width:27px;min-height:27px;
    padding:0;margin:0;opacity:1!important;pointer-events:auto!important;
    color:#f9e0a6;background:#090f19d9;
    border:1px solid #d2b57183;border-radius:8px;
    font:500 21px/1 Arial,sans-serif;
  }
  .invite-card>button.dismiss-panel:hover,
  .right-welcome>button.dismiss-panel:hover,
  .guideline-widget>button.dismiss-panel:hover{color:#fff;background:#1b3458;border-color:#ffdc8e}
}

/* 0.1.13: Settings is a full workspace; ordinary Orbit pages keep exact approved 3-column desktop design. */
@media (min-width:1201px){#app.settings-mode .shell{grid-template-columns:245px minmax(0,1fr);max-width:1500px;gap:28px}#app.settings-mode .rightbar{display:none!important}#app.settings-mode .main-content{max-width:none}#app.settings-mode .settings-panels{min-height:610px}}
@media (min-width:741px) and (max-width:1200px){#app.settings-mode .rightbar{display:none!important}}
@media (max-width:740px){#app.settings-mode .shell{display:block}#app.settings-mode .main-content{min-width:0}}
/* 0.1.17 mobile: avoid horizontal overflow from post action buttons. */
@media(max-width:680px){
 .post-actions{display:flex;flex-wrap:wrap;align-items:center;gap:7px 12px;min-width:0}
 .post-actions .action.last{margin-left:0}
 .post-actions .action{flex:0 0 auto;min-width:0}
 .forum-tags{max-width:100%}
}