/* Social 2.0 runtime guards */
[hidden]{display:none!important}
html,body{max-width:100%;overflow-x:hidden}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,input,textarea,select,a{min-width:0}
:focus-visible{outline:2px solid var(--blue-2,#1a64ff);outline-offset:2px}
.media-player-tools-v2>div{min-width:0}.media-player-tools-v2 button{white-space:nowrap}
.utility-view-v2,.chat-view-v2,.media-view-v2{min-width:0}
.chat-messages-v2,.feed-v2{overflow-wrap:anywhere}

/* Authenticated shell hard boundary. This guard is intentionally kept separate
   from visual styling because it prevents stale login layers from trapping the
   app if feature bootstrap fails after authentication. */
body[data-social-v2-authenticated="1"]{pointer-events:auto!important}
body[data-social-v2-authenticated="1"] #authGateV2{display:none!important;pointer-events:none!important}
body[data-social-v2-authenticated="1"] #appShellV2{display:block!important;pointer-events:auto!important}
body[data-social-v2-authenticated="1"][data-social-v2-route="chat"] #chatViewV2[hidden]{display:grid!important}

/* Browser-font fallback for the composer image glyph. */
.media-btn-v2{position:relative;font-size:0!important}
.media-btn-v2::before{content:"";display:block;width:20px;height:17px;margin:auto;box-sizing:border-box;border:2px solid currentColor;border-radius:3px;background:radial-gradient(circle at 72% 28%,currentColor 0 1.5px,transparent 1.7px),linear-gradient(135deg,transparent 0 50%,currentColor 51% 59%,transparent 60%) 2px 6px/9px 7px no-repeat,linear-gradient(45deg,transparent 0 50%,currentColor 51% 59%,transparent 60%) 8px 7px/9px 6px no-repeat}

/* Keep the desktop sidebar and content on the same frame across every route. */
@media(min-width:821px){
  .layout-v2{justify-content:start}
  body[data-social-v2-route="chat"] #chatViewV2.chat-view-v2,
  body[data-social-v2-route="media"] #mediaViewV2.media-view-v2,
  body[data-social-v2-route="profile"] #utilityViewV2.utility-view-v2,
  body[data-social-v2-route="people"] #utilityViewV2.utility-view-v2,
  body[data-social-v2-route="admin"] #utilityViewV2.utility-view-v2,
  body[data-social-v2-route="feedback"] #utilityViewV2.utility-view-v2{
    margin-left:max(264px,calc((100vw - 1440px)/2 + 264px));
    margin-right:max(0px,calc((100vw - 1440px)/2));
  }
}
@media(min-width:821px) and (max-width:1180px){
  body[data-social-v2-route="chat"] #chatViewV2.chat-view-v2,
  body[data-social-v2-route="media"] #mediaViewV2.media-view-v2,
  body[data-social-v2-route="profile"] #utilityViewV2.utility-view-v2,
  body[data-social-v2-route="people"] #utilityViewV2.utility-view-v2,
  body[data-social-v2-route="admin"] #utilityViewV2.utility-view-v2,
  body[data-social-v2-route="feedback"] #utilityViewV2.utility-view-v2{
    margin-left:234px;
    margin-right:0;
  }
}

@media(max-width:820px){
  .topbar-v2{padding-top:env(safe-area-inset-top,0px)}
  .bottom-nav-v2{padding-bottom:env(safe-area-inset-bottom,0px)}
  .media-player-card-v2{max-height:calc(100dvh - 16px)}
  .media-player-tools-v2>div{width:100%}
  .media-player-tools-v2>div button{flex:1 1 auto;min-height:40px}
  .chat-compose-row-v2{padding-bottom:max(0px,env(safe-area-inset-bottom,0px))}
  .utility-view-v2{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}

  /* iOS Safari auto-zooms focused form controls when their computed font size
     is below 16px. Keep controls at 16px rather than disabling user pinch zoom. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea,
  select,
  [contenteditable="true"]{
    font-size:16px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Required adult profile completion and self-service department picker. */
.profile-editor-form-v2 select{height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text);outline:0;font-size:14px}

/* Keep the mobile layout at the device's default scale. Form controls use the
   iOS-safe 16px floor so focusing a field never triggers automatic page zoom. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}body{min-width:0;overflow-x:hidden}@media(max-width:820px){input,select,textarea{font-size:16px!important}}
.profile-editor-form-v2 select:focus{border-color:var(--blue-2);box-shadow:0 0 0 4px rgba(26,100,255,.09)}
.profile-completion-required-v2 #appShellV2{pointer-events:none;user-select:none;filter:blur(1.5px)}
.profile-completion-layer-v2{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:20px;background:rgba(9,20,48,.58);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.profile-completion-layer-v2[hidden]{display:none}
.profile-completion-card-v2{width:min(520px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:28px;border:1px solid rgba(255,255,255,.72);border-radius:24px;background:#fff;box-shadow:0 26px 80px rgba(8,20,54,.32);color:var(--text)}
.profile-completion-icon-v2{width:58px;height:58px;display:grid;place-items:center;margin-bottom:16px;border-radius:18px;background:linear-gradient(135deg,#e8efff,#f2eaff);font-size:28px}
.profile-completion-copy-v2 p{margin:0 0 6px;color:var(--blue);font-size:10px;font-weight:850;letter-spacing:.12em}
.profile-completion-copy-v2 h2{margin:0 0 8px;font-size:24px;line-height:1.25}
.profile-completion-copy-v2>span{display:block;color:var(--muted);font-size:13px;line-height:1.6}
.profile-completion-card-v2 form{display:grid;gap:13px;margin-top:22px}
.profile-completion-card-v2 label{display:grid;gap:7px}
.profile-completion-card-v2 label>span{font-size:12px;font-weight:800;color:#3d4960}
.profile-completion-card-v2 input,.profile-completion-card-v2 select{width:100%;height:46px;padding:0 13px;border:1px solid var(--line);border-radius:12px;background:#f8faff;color:var(--text);outline:0;font:inherit}
.profile-completion-card-v2 input:focus,.profile-completion-card-v2 select:focus{border-color:var(--blue-2);box-shadow:0 0 0 4px rgba(26,100,255,.09)}
.profile-completion-card-v2 form>small{color:#7b5360;font-size:11px;line-height:1.5}
.profile-completion-card-v2 .primary-btn-v2{width:100%;margin-top:3px}
.profile-completion-logout-v2{min-height:42px;border:0;background:transparent;color:var(--muted);font-weight:750}
.profile-completion-card-v2 button:disabled{opacity:.58;cursor:wait}
@media(max-width:520px){.profile-completion-layer-v2{padding:12px}.profile-completion-card-v2{max-height:calc(100dvh - 24px);padding:22px 18px;border-radius:20px}.profile-completion-copy-v2 h2{font-size:21px}}

/* Stable in-document route shell. Dedicated views now live in the same grid as
   the feed, so changing tabs never swaps a normal-flow page for a fixed shell. */
.route-content-host-v2{min-width:0}
.route-content-host-v2[hidden]{display:none!important}
@media(min-width:821px){
  #mainLayoutV2.route-shell-only-v2{
    position:relative!important;top:auto!important;left:auto!important;transform:none!important;z-index:auto!important;
    width:min(1440px,100%)!important;height:auto!important;min-height:calc(100dvh - 68px);margin:0 auto!important;padding:24px!important;
    display:grid!important;grid-template-columns:240px minmax(0,680px) 320px!important;justify-content:start!important;gap:24px!important;pointer-events:auto!important
  }
  #mainLayoutV2.route-shell-only-v2 .left-rail-v2{
    position:sticky!important;top:92px!important;display:block!important;align-self:start!important;max-height:none!important;overflow:visible!important;pointer-events:auto!important
  }
  #mainLayoutV2.route-shell-only-v2 .feed-column-v2,
  #mainLayoutV2.route-shell-only-v2 .right-rail-v2{display:none!important}
  #mainLayoutV2.route-shell-only-v2 .route-content-host-v2{grid-column:2/4;display:block;min-width:0;align-self:start}
  #mainLayoutV2.route-shell-only-v2 .route-content-host-v2>#chatViewV2,
  #mainLayoutV2.route-shell-only-v2 .route-content-host-v2>#mediaViewV2,
  #mainLayoutV2.route-shell-only-v2 .route-content-host-v2>#readingViewV2,
  #mainLayoutV2.route-shell-only-v2 .route-content-host-v2>#utilityViewV2{
    width:100%!important;max-width:none!important;margin:0!important
  }
  #mainLayoutV2.route-shell-only-v2 .route-content-host-v2>#mediaViewV2,
  #mainLayoutV2.route-shell-only-v2 .route-content-host-v2>#utilityViewV2{padding-left:0!important;padding-right:0!important}
}
@media(min-width:821px) and (max-width:1180px){
  #mainLayoutV2.route-shell-only-v2{grid-template-columns:210px minmax(0,1fr)!important;justify-content:start!important}
  #mainLayoutV2.route-shell-only-v2 .route-content-host-v2{grid-column:2/3}
}
@media(max-width:820px){
  #mainLayoutV2.route-shell-only-v2{display:block!important;padding:12px!important}
  #mainLayoutV2.route-shell-only-v2 .feed-column-v2,
  #mainLayoutV2.route-shell-only-v2 .right-rail-v2{display:none!important}
  #mainLayoutV2.route-shell-only-v2 .route-content-host-v2{display:block;width:100%;min-width:0}
  #mainLayoutV2.route-shell-only-v2 .route-content-host-v2>#chatViewV2,
  #mainLayoutV2.route-shell-only-v2 .route-content-host-v2>#mediaViewV2,
  #mainLayoutV2.route-shell-only-v2 .route-content-host-v2>#readingViewV2,
  #mainLayoutV2.route-shell-only-v2 .route-content-host-v2>#utilityViewV2{width:100%!important;max-width:none!important;margin:0!important}
  #mainLayoutV2.route-shell-only-v2 .route-content-host-v2>#mediaViewV2,
  #mainLayoutV2.route-shell-only-v2 .route-content-host-v2>#utilityViewV2{padding-left:0!important;padding-right:0!important}
}

/* Fallback alignment for a route view created after the router's initial DOM
   pass. Once syncRouteV2 runs it is moved into routeContentHostV2; until then,
   keep the legacy sibling exactly aligned with the feed content column. */
@media(min-width:821px){
  body[data-social-v2-route="chat"] #appShellV2>#chatViewV2.chat-view-v2,
  body[data-social-v2-route="media"] #appShellV2>#mediaViewV2.media-view-v2,
  body[data-social-v2-route="profile"] #appShellV2>#utilityViewV2.utility-view-v2,
  body[data-social-v2-route="people"] #appShellV2>#utilityViewV2.utility-view-v2,
  body[data-social-v2-route="admin"] #appShellV2>#utilityViewV2.utility-view-v2,
  body[data-social-v2-route="feedback"] #appShellV2>#utilityViewV2.utility-view-v2{
    margin-left:max(264px,calc((100vw - 1440px)/2 + 264px))!important;
    margin-right:max(0px,calc((100vw - 1440px)/2))!important
  }
}
@media(min-width:821px) and (max-width:1180px){
  body[data-social-v2-route="chat"] #appShellV2>#chatViewV2.chat-view-v2,
  body[data-social-v2-route="media"] #appShellV2>#mediaViewV2.media-view-v2,
  body[data-social-v2-route="profile"] #appShellV2>#utilityViewV2.utility-view-v2,
  body[data-social-v2-route="people"] #appShellV2>#utilityViewV2.utility-view-v2,
  body[data-social-v2-route="admin"] #appShellV2>#utilityViewV2.utility-view-v2,
  body[data-social-v2-route="feedback"] #appShellV2>#utilityViewV2.utility-view-v2{
    margin-left:234px!important;margin-right:0!important
  }
}