/* Hub mobile authority: seamless discovery shelf + blue/black controls. */
@media (max-width:760px){
  .hub-layout{background:#04070c!important;color:#edf5ff!important;}
  .hub-layout .hub-viewport{min-height:calc(100dvh - 116px)!important;background:#050b13!important;}
  .hub-layout .hub-shell{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    min-height:0!important;
    background:#050b13!important;
  }

  /* Mobile header: keep every touch control inside the Hub blue system. */
  .hub-layout .hub-topbar{
    background:linear-gradient(180deg,#02060c,#050c16)!important;
    border-bottom-color:rgba(86,158,235,.22)!important;
  }
  .hub-layout .hub-experience-links a,
  .hub-layout .hub-primary-nav a,
  .hub-layout .hub-invite-trigger,
  .hub-layout .hub-profile-trigger,
  .hub-layout .hub-media-hub button,
  .hub-layout .hub-media-hub a{
    border-color:rgba(84,158,235,.28)!important;
    background:rgba(17,46,80,.24)!important;
    color:#cfe8ff!important;
  }
  .hub-layout .hub-primary-nav a.active,
  .hub-layout .hub-primary-nav a:hover,
  .hub-layout .hub-experience-links a:hover,
  .hub-layout .hub-invite-trigger:hover{
    border-color:rgba(76,171,255,.72)!important;
    background:rgba(37,120,211,.18)!important;
    color:#f0f9ff!important;
  }

  /* Things to Do becomes a discovery shelf, not a desktop sidebar. */
  .hub-layout .hub-left{
    position:relative!important;
    top:auto!important;
    grid-row:1!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    padding:12px 0 10px!important;
    border:0!important;
    border-bottom:1px solid rgba(86,158,235,.18)!important;
    background:linear-gradient(180deg,#071321,#050c15)!important;
    box-shadow:0 12px 28px rgba(0,0,0,.18)!important;
  }
  .hub-layout .hub-discovery-rail{display:block!important;gap:0!important;}
  .hub-layout .hub-discovery-rail__section:first-child{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    padding:0 12px!important;
  }
  .hub-layout .hub-discovery-rail__heading{align-items:center!important;}
  .hub-layout .hub-discovery-rail__heading h2{font-size:1.2rem!important;color:#f1f7ff!important;}
  .hub-layout .hub-kicker{color:#5fd3ff!important;}

  /* Area and distance become one compact control bar. */
  .hub-layout [aria-label="Things to Do search radius"]{
    margin:0!important;
    padding:10px!important;
    border:1px solid rgba(83,164,244,.34)!important;
    border-radius:14px!important;
    background:linear-gradient(145deg,rgba(14,40,70,.82),rgba(5,15,27,.94))!important;
    box-shadow:inset 0 1px rgba(255,255,255,.025),0 10px 26px rgba(0,0,0,.18)!important;
  }
  .hub-layout [aria-label="Things to Do search radius"] > div:first-child span,
  .hub-layout [aria-label="Things to Do search radius"] > div:first-child a{
    color:#63d4ff!important;
  }
  .hub-layout [aria-label="Things to Do search radius"] > div:first-child strong{color:#eef7ff!important;}
  .hub-layout [aria-label="Things to Do search radius"] button{
    min-height:36px!important;
    border-color:rgba(88,158,229,.28)!important;
    background:#091827!important;
    color:#9fb7cf!important;
  }
  .hub-layout [aria-label="Things to Do search radius"] button[aria-pressed="true"]{
    border-color:#55aaff!important;
    background:linear-gradient(180deg,#216db6,#174a80)!important;
    color:#fff!important;
    box-shadow:0 5px 14px rgba(23,110,201,.22)!important;
  }

  /* Tonight card becomes a compact hero instead of a giant rail card. */
  .hub-layout .hub-discovery-rail__feature{
    min-height:118px!important;
    margin:0!important;
    padding:14px 16px!important;
    border-radius:14px!important;
    border-color:rgba(82,167,245,.34)!important;
    background:linear-gradient(180deg,rgba(7,20,35,.35),#071321 86%),radial-gradient(circle at 84% 12%,rgba(52,146,237,.18),transparent 32%)!important;
    box-shadow:none!important;
  }
  .hub-layout .hub-discovery-rail__feature strong{font-size:1.35rem!important;}
  .hub-layout .hub-discovery-rail__feature-title{font-size:.7rem!important;}
  .hub-layout .hub-discovery-rail__feature b,
  .hub-layout .hub-discovery-rail__feature em{color:#67d4ff!important;}

  /* Flatten all category groups into one smooth sideways swipe lane. */
  .hub-layout .hub-discovery-rail__group{margin:0!important;}
  .hub-layout .hub-discovery-rail__group h3{display:none!important;}
  .hub-layout .hub-discovery-rail__section:first-child{
    overflow:hidden!important;
  }
  .hub-layout .hub-discovery-rail__section:first-child::after{content:"Swipe to explore";display:block;color:#657f99;font:650 .55rem var(--font-body);letter-spacing:.04em;margin-top:-2px;}
  .hub-layout .hub-discovery-rail__grid{
    display:flex!important;
    gap:7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-inline:contain!important;
    scroll-snap-type:x proximity!important;
    scrollbar-width:none!important;
    padding:0 0 2px!important;
  }
  .hub-layout .hub-discovery-rail__grid::-webkit-scrollbar{display:none!important;}
  .hub-layout .hub-discovery-rail__grid button,
  .hub-layout .hub-discovery-rail__grid a{
    flex:0 0 auto!important;
    scroll-snap-align:start!important;
    min-width:auto!important;
    min-height:42px!important;
    display:flex!important;
    grid-template-columns:none!important;
    align-items:center!important;
    gap:7px!important;
    padding:7px 10px!important;
    border-radius:999px!important;
    border:1px solid rgba(86,155,226,.28)!important;
    background:#091725!important;
    color:#d7e9fa!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .hub-layout .hub-discovery-rail__grid button.active,
  .hub-layout .hub-discovery-rail__grid a.active{
    border-color:#55aaff!important;
    background:rgba(35,116,202,.24)!important;
    box-shadow:inset 0 0 0 1px rgba(85,170,255,.08)!important;
  }
  .hub-layout .hub-discovery-rail__mark{
    grid-row:auto!important;
    width:25px!important;height:25px!important;flex:0 0 25px!important;
    border-color:rgba(93,170,245,.4)!important;color:#72d4ff!important;
    font-size:.64rem!important;
  }
  .hub-layout .hub-discovery-rail__copy{display:block!important;}
  .hub-layout .hub-discovery-rail__copy strong{font-size:.66rem!important;white-space:nowrap!important;}
  .hub-layout .hub-discovery-rail__copy small{display:none!important;}

  /* Interests are useful but secondary on phones. */
  .hub-layout .hub-discovery-rail__section:not(:first-child){display:none!important;}
  .hub-layout .hub-left-extra,.hub-layout .hub-leave{display:none!important;}

  /* Feed/results become the uninterrupted main canvas. */
  .hub-layout .hub-center{
    grid-row:2!important;
    width:100%!important;
    padding:18px 12px calc(78px + env(safe-area-inset-bottom))!important;
    background:#050b13!important;
  }
  .hub-layout .hub-right{
    position:relative!important;
    top:auto!important;
    grid-row:3!important;
    width:100%!important;
    height:auto!important;
    padding:16px 12px calc(30px + env(safe-area-inset-bottom))!important;
    border:0!important;
    border-top:1px solid rgba(86,158,235,.14)!important;
    background:#060e19!important;
  }

  /* Eliminate remaining green/gold mobile popovers and drawers. */
  .hub-layout .profile-drawer,
  .hub-layout .profile-drawer__body,
  .hub-layout .hub-profile-drawer,
  .hub-layout [role="dialog"],
  .hub-layout [role="menu"],
  .hub-layout details[open] > :not(summary){
    border-color:rgba(89,158,229,.22)!important;
    background:#08131f!important;
    color:#eaf4ff!important;
  }
  .hub-layout .drawer-secondary,
  .hub-layout .profile-drawer__signout,
  .hub-layout .hub-profile-drawer__row,
  .hub-layout .hub-profile-drawer__link{
    border-color:rgba(88,158,229,.28)!important;
    background:rgba(23,72,120,.10)!important;
    color:#d5eaff!important;
  }
  .hub-layout .drawer-primary{
    border-color:#55aaff!important;
    background:#3b92e8!important;
    color:#06101c!important;
  }
  .hub-layout button:focus-visible,
  .hub-layout a:focus-visible,
  .hub-layout input:focus-visible,
  .hub-layout summary:focus-visible{outline-color:#55aaff!important;}
}