/* HeartLink Mobile Polish v11.13.1
   Targeted safety layer. No fake viewport scaling. */
:root{
  --hl-mobile-gap:clamp(8px,2.5vw,14px);
  --hl-mobile-font:clamp(12px,3.5vw,14px);
}
html,body{max-width:100%;overflow-x:hidden}
@supports(overflow:clip){body{overflow-x:clip}}
:where(.hl70-header,.hl70-tabs,.hlr34-card,.hlv33-media-stage,.hlv33-reel-card,
       .hlv33-action-rail,.phone,.card,.ui,.top,.cluster,.modes,.deck,
       .hlsp-editor,.hlsp-edtop,.hlsp-tools,.hlsp-filters,.hlsp-scroll,
       .app-bottom-nav,.hl-shell,.app-shell)>*{min-width:0}
img,video,canvas,svg{max-width:100%}
@supports(height:100dvh){
  .hlr34-body,.hlv33-feed,.phone{min-height:100dvh}
}
.hlsp-scroll,.hlsp-tools,.hlsp-filters,
[class*="-chips"],[class*="-strip"]{
  overflow-x:auto;
  overflow-y:hidden;
  flex-wrap:nowrap;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hlsp-scroll::-webkit-scrollbar,.hlsp-tools::-webkit-scrollbar,
.hlsp-filters::-webkit-scrollbar,[class*="-chips"]::-webkit-scrollbar,
[class*="-strip"]::-webkit-scrollbar{display:none}

@media(max-width:360px){
  .top{padding-left:10px!important;padding-right:10px!important}
  .cluster{gap:2px!important}
  .top .ib{width:40px!important;height:40px!important}
  .top .cl{width:36px!important;height:36px!important;font-size:12px!important}
  .modes button{padding-left:12px!important;padding-right:12px!important;font-size:12px!important}
  .rail{right:0!important}
  .hlsp-ib{width:38px!important;height:38px!important}
  .hlsp-edtop{height:56px!important}
  .hlsp-primary{height:42px!important;font-size:12px!important}
  .hlsp-chip,.hlsp-enhance{height:32px!important;padding-inline:10px!important;font-size:10px!important}
  .hlv33-footer-next,.hlv33-publish-button{min-width:112px!important;padding-inline:10px!important}
}
@media(pointer:coarse) and (max-width:360px){
  button,a[role=button]{touch-action:manipulation}
}
@media(prefers-reduced-motion:reduce){
  .hlr34-card *,.phone *{scroll-behavior:auto}
}

/* HeartLink v106 — Android/WebView touch highlight polish.
   Prevent the native blue/teal tap rectangle while preserving keyboard focus. */
html,body,body *{-webkit-tap-highlight-color:transparent}
:where(a,button,[role="button"],summary):focus:not(:focus-visible){outline:none}
:where(a,button,[role="button"],summary):focus-visible{
  outline:2px solid rgba(255,255,255,.82);
  outline-offset:2px;
}