/* Shared, fixed-height segmented controls. No geometric stretching of selection. */
@media screen{
  .app-surface .segmented-control.hub-nav,
  .app-surface .segmented-control.main-preview-tabs,
  .app-surface .unified-case .segmented-control.chapter-toggle{
    position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
    align-items:center;gap:3px;height:48px;min-height:48px;padding:4px;
    width:min(100%,560px);max-width:100%;box-sizing:border-box;
    border:0;border-radius:999px!important;clip-path:none!important;background:#eaeaec;isolation:isolate;
    overflow:visible;box-shadow:none;backdrop-filter:none;
  }
  .app-surface .segmented-control.main-preview-tabs{width:min(100%,480px);margin-bottom:28px}
  .app-surface .segmented-control.hub-nav{margin:24px 0 28px}
  body.app-surface.project-view .site-content>.segmented-control.hub-nav{display:grid}
  body.app-surface.project-view .site-content>.hub-nav>a[data-view="home"]{display:flex}
  .app-surface .segmented-control> :is(a,button){
    position:relative;z-index:1;display:flex;justify-content:center;align-items:center;
    flex:none;width:auto;min-width:0;max-width:none;height:40px;min-height:40px;
    padding:0 12px;margin:0;border:0;border-radius:999px;
    font-family:inherit;font-size:14px;font-weight:550;line-height:1.2;
    white-space:nowrap;text-overflow:ellipsis;text-decoration:none!important;
    letter-spacing:-.015em;color:#7b7b82;background:transparent;box-shadow:none;
    overflow:hidden;transition:color .24s ease;box-sizing:border-box;
  }
  .app-surface .segmented-control>:is(a,button)::after{display:none}
  .app-surface .segmented-control>:is(a,button):is([aria-current],[aria-selected="true"]){color:#29292e;background:transparent;box-shadow:none;text-decoration:none}
  .app-surface .segmented-control:not(.is-ready)>:is(a,button):is([aria-current],[aria-selected="true"]){background:white;box-shadow:0 2px 7px #1d1d1f09}
  body.app-surface .segmented-control>.selection-pill,
  body.app-surface.project-view .site-content>.hub-nav>.selection-pill{
    display:block;position:absolute;z-index:0;pointer-events:none;
    min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:999px;
    background:white;box-shadow:0 2px 7px #1d1d1f09;visibility:hidden;
  }
  .app-surface .segmented-control.is-ready>.selection-pill{visibility:visible}
  .app-surface .segmented-control>:is(a,button):focus-visible{outline:2px solid #777780;outline-offset:-3px}
  .app-surface .unified-case .segmented-control.chapter-toggle{
    position:sticky;top:calc(var(--masthead-height,86px) + 10px);z-index:6;
    width:min(100%,560px);margin:4px 0 30px;
  }
  .app-surface.project-view .detail-top{
    border:0;margin:26px 0 0;padding:20px 4px;gap:24px;
    font-size:13px;color:#85858d;
  }
  .app-surface.project-view .detail-top .text-button{font-size:12px;border:0;padding:8px 0;color:#85858d}
  html[lang="en"] .app-surface .segmented-control>:is(a,button){white-space:nowrap;font-size:13px;line-height:1.2;padding-inline:8px}
}
@media screen and (max-width:760px){
 .app-surface .segmented-control.hub-nav,.app-surface .segmented-control.main-preview-tabs,
 .app-surface .unified-case .segmented-control.chapter-toggle{width:100%;height:48px;min-height:48px;gap:2px;padding:4px}
 .app-surface .segmented-control.hub-nav{margin:20px 0 26px}
 .app-surface .unified-case .segmented-control.chapter-toggle{margin:2px 0 26px}
 .app-surface .segmented-control>:is(a,button){height:40px;min-height:40px;font-size:13px;padding:0 6px;line-height:1.2}
 .app-surface .segmented-control.main-preview-tabs>button{font-size:14px}
 html[lang="en"] .app-surface .segmented-control>:is(a,button){font-size:12px;padding-inline:4px;white-space:nowrap}
}
@media screen and (max-width:390px){
 .app-surface .segmented-control.hub-nav>a{font-size:12px;padding-inline:4px}
}
@media screen and (max-width:360px){
 .app-surface .segmented-control.hub-nav>a,.app-surface .unified-case .segmented-control.chapter-toggle>a{font-size:11.5px;padding-inline:3px}
 .app-surface .segmented-control.main-preview-tabs>button{font-size:12.5px;padding-inline:4px}
 html[lang="en"] .app-surface .segmented-control.hub-nav>a,html[lang="en"] .app-surface .unified-case .segmented-control.chapter-toggle>a{font-size:11px;padding-inline:2px}
}
@media(prefers-reduced-motion:reduce){.segmented-control *{animation:none!important;transition:none!important}}
@media print{.chapter-toggle,.segmented-control{display:none!important}}

/* Capsules are circular CSS arcs, never continuous-corner card masks. */
@media screen {
 .app-surface .segmented-control>:is(a,button,.selection-pill),
 .app-surface .work-home .featured-tabs button {border-radius:999px!important;clip-path:none!important}
}