/* NewsSutra 2.0-R01.2.4 — compact mobility dropdowns + masthead rebalance */

/* Immigration / Global Mobility: replace chip walls with three clean dropdown fields. */
#immigrationToolsWrap.mobility-dropdown-mode{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(180px,1fr))!important;
  gap:12px!important;
  align-items:end!important;
  padding:11px 0 13px!important;
  margin:0 0 18px!important;
  border-top:3px solid var(--brand-green)!important;
  border-bottom:1px solid var(--line)!important;
}
#immigrationToolsWrap.mobility-dropdown-mode .mobility-filter-section{
  display:block!important;
  min-width:0!important;
  padding:0!important;
  margin:0!important;
}
#immigrationToolsWrap.mobility-dropdown-mode .mobility-filter-label,
#immigrationToolsWrap.mobility-dropdown-mode .immigration-tools{
  display:none!important;
}
.mobility-select-field{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.mobility-select-field>span{
  font-size:8px;
  line-height:1;
  font-weight:850;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted);
}
.mobility-select-shell{
  position:relative;
  min-width:0;
}
.mobility-select-shell:after{
  content:'⌄';
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-54%);
  pointer-events:none;
  color:var(--brand-green);
  font-size:15px;
  font-weight:900;
}
.mobility-select{
  width:100%;
  min-width:0;
  height:36px;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel);
  color:var(--text);
  padding:0 34px 0 11px;
  font:750 10.5px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  cursor:pointer;
  outline:none;
  box-shadow:0 1px 0 rgba(255,255,255,.65),0 2px 7px rgba(0,0,0,.04);
}
.mobility-select:hover{border-color:color-mix(in srgb,var(--brand-green) 50%,var(--line))}
.mobility-select:focus{
  border-color:var(--brand-green);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-green) 13%,transparent);
}
html[data-theme="dark"] .mobility-select{box-shadow:0 1px 0 rgba(255,255,255,.05),0 2px 8px rgba(0,0,0,.20)}

/* Rebalance masthead utilities so journalism and identity remain visually primary. */
.topbar{
  align-items:center!important;
  padding-top:7px!important;
  column-gap:18px!important;
}
.topbar-actions{
  align-self:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  min-width:0!important;
}
.search-box{
  width:min(292px,24vw)!important;
  height:34px!important;
  min-height:34px!important;
  border-radius:18px!important;
  padding:0 11px!important;
  background:color-mix(in srgb,var(--panel) 88%,transparent)!important;
}
.search-box span{font-size:14px!important;line-height:1!important}
.search-box input{
  min-width:0!important;
  font-size:12px!important;
  line-height:1!important;
}

/* True compact iPhone-style sliding switch. */
#themeButton{
  position:relative!important;
  flex:0 0 48px!important;
  width:48px!important;
  min-width:48px!important;
  height:27px!important;
  min-height:27px!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  overflow:visible!important;
  background:#e4e7eb!important;
  background-image:none!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 1px 3px rgba(0,0,0,.08)!important;
  transition:background .2s ease,box-shadow .2s ease!important;
  font-size:0!important;
  color:transparent!important;
}
#themeButton:before{
  content:''!important;
  position:absolute!important;
  left:2px!important;
  top:2px!important;
  width:23px!important;
  height:23px!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 1px 4px rgba(0,0,0,.28),inset 0 0 0 1px rgba(0,0,0,.04)!important;
  transform:translateX(0)!important;
  transition:transform .2s cubic-bezier(.2,.8,.2,1)!important;
  z-index:3!important;
}
#themeButton:after{content:''!important;display:none!important}
html[data-theme="dark"] #themeButton{
  background:var(--brand-green)!important;
  background-image:none!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.16)!important;
}
html[data-theme="dark"] #themeButton:before{transform:translateX(21px)!important}
#themeButton:active:before{width:23px!important}
html[data-theme="dark"] #themeButton:active:before{transform:translateX(21px)!important}

#refreshButton{
  flex:0 0 31px!important;
  width:31px!important;
  min-width:31px!important;
  height:31px!important;
  min-height:31px!important;
  padding:0!important;
  border-radius:50%!important;
  border:1px solid var(--line)!important;
  background:var(--panel)!important;
  box-shadow:0 1px 3px rgba(0,0,0,.05)!important;
}
#refreshButton:after{font-size:16px!important;line-height:1!important}
.refresh-line{padding:3px 0 5px!important;font-size:8px!important}
.topbar-context{align-self:center!important}
.topbar-context h1{margin-bottom:2px!important;line-height:1.08!important}

@media(max-width:1100px) and (min-width:761px){
  .search-box{width:min(230px,23vw)!important}
  #immigrationToolsWrap.mobility-dropdown-mode{grid-template-columns:repeat(3,minmax(150px,1fr))!important;gap:9px!important}
}

@media(max-width:760px){
  #immigrationToolsWrap.mobility-dropdown-mode{
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:10px 0 12px!important;
  }
  .mobility-select{height:38px;font-size:11px}
  .topbar-actions{gap:5px!important}
  .search-box{
    width:34px!important;
    height:31px!important;
    min-height:31px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  .search-box span{font-size:17px!important}
  .search-box input{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    top:62px!important;
    width:calc(100vw - 24px)!important;
    height:40px!important;
    padding:0 14px!important;
    border:1px solid var(--line)!important;
    border-radius:20px!important;
    background:var(--panel)!important;
    z-index:40!important;
  }
  #themeButton{width:44px!important;min-width:44px!important;flex-basis:44px!important;height:25px!important;min-height:25px!important}
  #themeButton:before{width:21px!important;height:21px!important}
  html[data-theme="dark"] #themeButton:before{transform:translateX(19px)!important}
  #refreshButton{width:29px!important;min-width:29px!important;flex-basis:29px!important;height:29px!important;min-height:29px!important}
}

@media(prefers-reduced-motion:reduce){
  #themeButton,#themeButton:before{transition:none!important}
}