/* v737 - Settings: the section menu is visible on phones/small tablets (<=860px).
   Before: the side rail was hidden and only a small "current section" button (opening a sheet) was left.
   Now: the same sections show as a sticky, swipeable strip of pills (icon + name) under the header.
   CSS only. The existing .sp-tabs markup + click handler (js/162) are used as they are. Roll back: remove the link tag. */
@media (max-width:860px){
  #settingsProRoot .sp-current-bar{display:none!important}
  /* overflow:hidden on the root made every sticky child stick to nothing; clip keeps the no-sideways-scroll guard */
  #settingsProRoot{overflow:visible!important;overflow-x:clip!important}
  #settingsProRoot .sp-tabs{
    display:flex!important;gap:8px;align-items:center;
    position:sticky;top:calc(var(--header-h,56px) + 4px);z-index:72;
    margin:0 -2px 12px;padding:8px 2px 9px;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    background:var(--paper,var(--d-soft,#fff));border-bottom:1px solid var(--d-line,#E3E7EC);
  }
  #settingsProRoot .sp-tabs::-webkit-scrollbar{display:none}
  #settingsProRoot .sp-tabs .sp-nav-item{
    width:auto;flex:0 0 auto;min-width:0;min-height:44px;margin:0;
    padding:5px 14px 5px 6px;gap:8px;border-radius:999px;scroll-snap-align:center;
    border:1px solid var(--d-line,#E3E7EC);background:var(--d-card,#fff);box-shadow:var(--d-shadow,none);
  }
  #settingsProRoot .sp-tabs .sp-nav-item:hover{transform:none}
  #settingsProRoot .sp-tabs .sp-nav-icon{width:32px;height:32px;border-radius:50%;font-size:13px}
  #settingsProRoot .sp-tabs .sp-nav-copy{flex:none}
  #settingsProRoot .sp-tabs .sp-nav-copy b{font-size:13px;white-space:nowrap}
  #settingsProRoot .sp-tabs .sp-nav-copy small,
  #settingsProRoot .sp-tabs .sp-nav-item .sp-chip,
  #settingsProRoot .sp-tabs .sp-nav-item .sp-chip-stack{display:none!important}
  #settingsProRoot .sp-tabs .sp-nav-item.is-active{background:var(--d-navy,#162D4C);border-color:var(--d-navy,#162D4C);color:#fff}
  [data-theme="dark"] #settingsProRoot .sp-tabs{background:var(--paper,#0F1620)}
  [data-theme="dark"] #settingsProRoot .sp-tabs .sp-nav-item.is-active{background:var(--d-gold,#CEA577);border-color:var(--d-gold,#CEA577);color:#162D4C}
}