/*
 * Desktop header geometry for Spotter Otter.
 * The center tabs use equal-width side tracks, so they remain centered on the
 * page even when signed-in and signed-out action groups have different widths.
 */
@media (min-width:1361px){
  body.so-modern .navin{
    width:min(1360px,calc(100% - 40px));
    max-width:1360px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:18px;
  }
  body.so-modern .navin>.brand{
    grid-column:1;
    justify-self:start;
  }
  body.so-modern .navin>.so-app-tabs{
    grid-column:2;
    justify-self:center;
    margin-left:0;
  }
  body.so-modern .navin>.navlinks{
    grid-column:3;
    justify-self:end;
    margin-left:0!important;
    flex-wrap:nowrap;
  }
}

/* Keep every control readable before the one-row layout has enough room. */
@media (min-width:901px) and (max-width:1360px){
  body.so-modern .navin{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px 18px;
    padding-block:8px;
  }
  body.so-modern .navin>.brand{
    grid-column:1;
    justify-self:start;
  }
  body.so-modern .navin>.navlinks{
    grid-column:2;
    justify-self:end;
    margin-left:0!important;
    flex-wrap:nowrap;
  }
  body.so-modern .navin>.so-app-tabs{
    grid-column:1/-1;
    grid-row:2;
    justify-self:center;
    margin:0;
  }
}