/* QRSocial R83 — mobile density + application design system.
   Internal product screens should behave like an app, not marketing pages. */
:root{
  --qs-r83-gutter:14px;
  --qs-r83-gap:12px;
  --qs-r83-control:46px;
  --qs-r83-radius:16px;
  --qs-r83-card-radius:20px;
  --qs-r83-shadow:0 5px 18px rgba(22,30,48,.055);
}

/* Logged-in page headers: keep semantic title, remove promotional artwork. */
body.has-tabbar .qs-page-hero-r36,
body.has-tabbar .qs-page-hero-r38{
  min-height:0!important;
  margin:0 0 12px!important;
  padding:8px 2px 10px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  display:block!important;
}
body.has-tabbar .qs-page-hero-r36::before,
body.has-tabbar .qs-page-hero-r36::after,
body.has-tabbar .qs-page-hero-r38::before,
body.has-tabbar .qs-page-hero-r38::after{display:none!important;background-image:none!important}
body.has-tabbar .qs-page-hero-r36-copy{max-width:none!important;padding:0!important}
body.has-tabbar .qs-page-hero-r36-eyebrow{display:none!important}
body.has-tabbar .qs-page-hero-r36 h1,
body.has-tabbar .qs-page-hero-r38 h1{
  margin:0!important;
  color:var(--qs-text)!important;
  font-family:var(--qs-font)!important;
  font-size:clamp(23px,3.2vw,31px)!important;
  line-height:1.08!important;
  letter-spacing:-.04em!important;
  font-weight:800!important;
}
body.has-tabbar .qs-page-hero-r36 p,
body.has-tabbar .qs-page-hero-r38 p{
  max-width:680px!important;
  margin:4px 0 0!important;
  color:var(--qs-text-secondary)!important;
  font-size:11.5px!important;
  line-height:1.4!important;
}
body.has-tabbar .qs-page-hero-r36 + .qs-r36-header-actions{margin-top:-2px!important}

/* One control language. */
body.has-tabbar :is(.qs-primary,.qs-secondary,.btn,.qs-primary-mini){
  min-height:var(--qs-r83-control);
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 15px;
  border-radius:13px;
  line-height:1.1;
}
body.has-tabbar :is(button,a,input,select,textarea){-webkit-tap-highlight-color:transparent}
body.has-tabbar button:focus-visible,
body.has-tabbar a:focus-visible,
body.has-tabbar input:focus-visible,
body.has-tabbar select:focus-visible,
body.has-tabbar textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--qs-accent) 22%,transparent);outline-offset:2px}

/* Flatter app surfaces. */
body.has-tabbar .qs-card{
  border-color:color-mix(in srgb,var(--qs-line) 86%,transparent);
  border-radius:var(--qs-r83-card-radius);
  box-shadow:var(--qs-r83-shadow);
}
body.has-tabbar .qs-card .qs-card{box-shadow:none}
body.has-tabbar .qs-r36-header-actions,
body.has-tabbar .qs-r77-hero-actions{gap:8px!important;margin-bottom:12px!important}
body.has-tabbar .qs-r36-header-actions>*{min-height:var(--qs-r83-control)}

/* Lists should look like an app feed, not floating presentation cards. */
body.has-tabbar .qs-notification-list{gap:6px!important}
body.has-tabbar .qs-notification{border-radius:16px!important;padding:11px 12px!important;min-height:64px!important}
body.has-tabbar .qs-inbox-online,
body.has-tabbar .qs-r77-inbox-circles{box-shadow:none!important}

/* Prevent fixed bottom navigation from covering the final actionable row. */
body.has-tabbar{scroll-padding-bottom:120px}

@media(max-width:760px){
  :root{--qs-r83-gutter:10px;--qs-r83-gap:9px;--qs-r83-control:44px;--qs-r83-card-radius:18px}
  body.has-tabbar{
    padding-left:0!important;
    padding-bottom:calc(102px + env(safe-area-inset-bottom))!important;
    background:var(--qs-bg)!important;
  }
  body.has-tabbar .qs-page,
  body.has-tabbar .container,
  body.has-tabbar .qs-r77-shell,
  body.has-tabbar .qs-r78-activity{
    width:auto!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:var(--qs-r83-gutter)!important;
    padding-right:var(--qs-r83-gutter)!important;
  }
  body.has-tabbar .qs-page{padding-top:8px!important;padding-bottom:calc(105px + env(safe-area-inset-bottom))!important}
  body.has-tabbar .container{padding-bottom:calc(105px + env(safe-area-inset-bottom))!important}
  body.has-tabbar .qs-inbox{padding-top:8px!important}

  /* Compact title bars: no artwork, no subtitle unless a screen explicitly needs it later. */
  body.has-tabbar .qs-page-hero-r36,
  body.has-tabbar .qs-page-hero-r38{
    margin:0 0 7px!important;
    padding:5px 2px 7px!important;
  }
  body.has-tabbar .qs-page-hero-r36 h1,
  body.has-tabbar .qs-page-hero-r38 h1{font-size:22px!important}
  body.has-tabbar .qs-page-hero-r36 p,
  body.has-tabbar .qs-page-hero-r38 p{display:none!important}

  /* Nerddi Five becomes a thin system bar. */
  body.has-tabbar .qs-network-header{
    height:calc(56px + env(safe-area-inset-top))!important;
    grid-template-columns:34px minmax(0,1fr) 34px!important;
    gap:5px!important;
    padding:env(safe-area-inset-top) 8px 0!important;
    box-shadow:0 3px 14px rgba(22,30,48,.055)!important;
  }
  body.has-tabbar .qs-network-action{width:33px!important;height:33px!important;border-radius:10px!important}
  body.has-tabbar .qs-network-orbit{
    width:min(100%,226px)!important;
    height:38px!important;
    padding:2px!important;
    gap:1px!important;
    border-radius:999px!important;
    box-shadow:none!important;
  }
  body.has-tabbar .qs-network-orbit>a{height:32px!important;border-radius:999px!important;gap:0!important}
  body.has-tabbar .qs-network-orbit>a>img,
  body.has-tabbar .qs-network-face,
  body.has-tabbar .qs-network-centro,
  body.has-tabbar .qs-network-grid{width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important;max-width:16px!important;max-height:16px!important;flex-basis:16px!important}
  body.has-tabbar .qs-network-face img{width:16px!important;height:16px!important}
  body.has-tabbar .qs-network-orbit>a.active>img{width:17px!important;height:17px!important;max-width:17px!important;max-height:17px!important}
  body.has-tabbar .qs-network-orbit>a>span:last-of-type{font-size:5.2px!important;line-height:1!important}

  /* Bottom navigation: slightly lower visual mass, explicit safe-area clearance. */
  body.has-tabbar .qs-r59-mobile-nav{
    left:8px!important;
    right:8px!important;
    bottom:calc(7px + env(safe-area-inset-bottom))!important;
    height:68px!important;
    padding:6px!important;
    border-radius:22px!important;
    box-shadow:0 12px 38px rgba(7,12,24,.15)!important;
  }
  body.has-tabbar .qs-r59-mobile-nav .qs-mobile-nav-item,
  body.has-tabbar .qs-r59-mobile-nav .qs-r59-create{height:54px!important}
  body.has-tabbar .qs-r59-create-orb{width:54px!important;height:54px!important;margin-top:-22px!important;border-radius:18px!important;font-size:28px!important}
  body.has-tabbar .qs-mobile-nav-icon{width:22px!important;height:22px!important}

  /* Mobile button grids: equal targets and predictable gaps. */
  body.has-tabbar .qs-r36-header-actions,
  body.has-tabbar .qs-r77-hero-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px!important;
    align-items:stretch!important;
    margin:0 0 10px!important;
  }
  body.has-tabbar .qs-r36-header-actions>*:only-child,
  body.has-tabbar .qs-r77-hero-actions>*:only-child{grid-column:1/-1}
  body.has-tabbar .qs-r36-header-actions>*{width:100%!important;margin:0!important}

  /* Search and segmented controls use the same compact density. */
  body.has-tabbar input[type="search"],
  body.has-tabbar .qs-r26-inbox-search,
  body.has-tabbar .qs-people-search{min-height:46px!important;border-radius:15px!important}
  body.has-tabbar .qs-r58-comms-switch,
  body.has-tabbar .qs-inbox-tabs,
  body.has-tabbar .qs-calls-tabs{margin-top:0!important;margin-bottom:10px!important}

  /* Remove excess vertical air in common internal surfaces. */
  body.has-tabbar .qs-social-modern{--qs-social-gap:10px!important}
  body.has-tabbar .qs-people-grid,
  body.has-tabbar .qs-community-grid{gap:8px!important}
  body.has-tabbar .qs-person-card{padding:12px!important;border-radius:17px!important}
  body.has-tabbar .qs-empty-feed{padding:34px 18px!important;border-radius:18px!important}
  body.has-tabbar .qs-r78-activity{gap:9px!important;padding-top:8px!important;padding-bottom:calc(105px + env(safe-area-inset-bottom))!important}
  body.has-tabbar .qs-r78-activity-hero{padding:12px!important;border-radius:17px!important;gap:8px!important}
  body.has-tabbar .qs-r78-activity-hero h2{font-size:18px!important}
  body.has-tabbar .qs-r78-activity-hero p{font-size:10px!important}

  /* Compact the Circle promo; the people list should arrive quickly. */
  body.has-tabbar .qs-r77-people-circles{padding:12px!important;margin-bottom:9px!important;gap:10px!important;border-radius:17px!important}
  body.has-tabbar .qs-r77-people-circles h2{font-size:17px!important;margin:2px 0!important}
  body.has-tabbar .qs-r77-people-circles p{font-size:10px!important;margin:2px 0 0!important}
  body.has-tabbar .qs-r77-people-circles .qs-eyebrow{font-size:7px!important}

  /* Legal copy should never compete with the app navigation. */
  body.has-tabbar .qs-legal-footer{padding-bottom:calc(98px + env(safe-area-inset-bottom))!important}
}

@media(max-width:390px){
  body.has-tabbar .qs-network-orbit{width:min(100%,218px)!important}
  body.has-tabbar .qs-network-orbit>a>span:last-of-type{font-size:4.9px!important}
  body.has-tabbar .qs-r36-header-actions,
  body.has-tabbar .qs-r77-hero-actions{grid-template-columns:1fr 1fr!important}
}

/* R83 targeted shell corrections for legacy communication surfaces. */
@media(max-width:760px){
  body.has-tabbar .qs-r82-message-secondary-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.has-tabbar .qs-r82-message-secondary-actions a{min-width:0!important;padding:0 7px!important;font-size:10px!important;white-space:nowrap!important}
  body.has-tabbar .qs-r58-comms-switch{gap:3px!important;padding:3px!important;border-radius:16px!important;box-shadow:none!important;overflow:visible!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
  body.has-tabbar .qs-r58-comms-switch a{min-width:0!important;min-height:42px!important;gap:4px!important;padding:0 3px!important;border-radius:12px!important;font-size:9px!important}
  body.has-tabbar .qs-r58-comms-switch a>span{font-size:13px!important}
  body.has-tabbar .qs-r26-inbox-search{height:46px!important;padding:0 13px!important;box-shadow:none!important}
  body.has-tabbar .qs-people-search{top:calc(58px + env(safe-area-inset-top))!important}
  body.has-tabbar .qs-calls-tabs{top:calc(58px + env(safe-area-inset-top))!important;box-shadow:0 4px 16px rgba(22,30,48,.055)!important}
  body.has-tabbar .qs-calls-page>.qs-phone-page-hero-r53{min-height:0!important;margin:0 0 7px!important;padding:5px 2px 7px!important;border-radius:0!important}
}
@media(max-width:380px){
  body.has-tabbar .qs-r82-message-secondary-actions a{font-size:9px!important;padding:0 4px!important}
  body.has-tabbar .qs-r58-comms-switch a b{font-size:8.5px!important}
}